/* ============================================================
   PJM + Partner - Struktur, versionsunabhaengig
   ------------------------------------------------------------
   Diese Datei enthaelt das gesamte Markup-Verhalten. Sie kennt
   keine Versionen: jeder Unterschied zwischen A und B kommt aus
   den Tokens in theme-a.css / theme-b.css.

   Regel, die das System traegt: Wenn eine Version einen Baustein
   braucht, den die andere nicht hat, ist das ein Konzeptfehler.
   ============================================================ */

/* ------------------------------------------------------------
   1. Grundlagen
   ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--md);
  font-weight: var(--wp--custom--weight--body);
  line-height: var(--wp--custom--line-height--body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img { height: auto; }

/* Kursive sind ausgeschlossen. Register: keine Kursiven, keine Serifen. */
i, em, cite, address, dfn, var {
  font-style: normal;
}

::selection {
  background: var(--wp--preset--color--accent-wash);
  color: var(--wp--preset--color--ink);
}

:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-text);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--wp--preset--spacing--40);
  top: -4rem;
  z-index: 100;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
  padding: 0.75rem 1.25rem;
  font-size: var(--wp--preset--font-size--sm);
  text-decoration: none;
  transition: top var(--wp--custom--transition--state);
}

.skip-link:focus { top: 0.75rem; }

/* ------------------------------------------------------------
   2. Typografie
   Satzqualitaet ist bei diesem Kunden ein Kompetenzsignal.
   Kein optischer Versatz, keine ungleichen Abstaende, keine
   abweichenden Zeilenabstaende in derselben Liste.
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--wp--custom--line-height--tight);
  font-weight: var(--wp--custom--weight--heading);
  text-wrap: balance;              /* K6: keine Einzelwort-Umbrueche */
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Silbentrennung NUR in den grossen Ueberschriften.
   Deutsche Komposita wie "Abschlagszahlungen" sind versal und weit
   gesperrt breiter als ein Telefondisplay; dort ist die Trennung die
   saubere Loesung. In Kachel-Titeln waere sie ein Fehler: dort gibt
   es Wortgrenzen, und eine getrennte Zeile auf dem Desktop liest
   sich wie ein Versehen. */
/* Seit dem 2026-09-22 mit Untergrenze, Mail von Martin Moebius und
   Dr. Uhlmannsiek: "Auf der Seite Kanzlei ist das Wort Beratung
   getrennt." Der Befund stimmt, nur zeigt ihn nicht jeder Browser:
   Chromium trennt "Beratung" nicht, die Trennhilfe von Safari schon
   (Be-ra-tung). Statt einer Sonderregel fuer ein Wort gilt jetzt eine
   Untergrenze - getrennt wird erst ab zwoelf Zeichen, und nur mit
   mindestens vier Zeichen auf jeder Seite. "Beratung" (8) faellt
   damit heraus, "Rechtsgebiete" (13) und "Abschlagszahlungen" (18)
   bleiben trennbar; genau fuer die stand die Regel hier.
   Browser ohne hyphenate-limit-chars trennen weiter wie bisher. */
.display,
.headline {
  hyphens: auto;
  hyphenate-limit-chars: 12 4 4;
}

.display,
h1.display,
h2.display {
  font-family: var(--wp--preset--font-family--condensed);
  font-size: var(--wp--preset--font-size--display);
  font-weight: var(--wp--custom--weight--display);
  letter-spacing: var(--wp--custom--tracking--display);
  text-transform: var(--wp--custom--case--display);
  line-height: 1.14;
}

.headline {
  font-family: var(--wp--preset--font-family--condensed);
  font-size: var(--wp--preset--font-size--xxl);
  font-weight: var(--wp--custom--weight--display);
  letter-spacing: var(--wp--custom--tracking--display);
  text-transform: var(--wp--custom--case--display);
  line-height: 1.18;
}

.subhead {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--heading);
  letter-spacing: 0;
  line-height: 1.28;
}

p {
  margin: 0 0 var(--wp--preset--spacing--30);
  max-width: 42rem;
}

p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 300;
  line-height: 1.45;
  color: var(--wp--preset--color--ink);
  max-width: 40rem;
}

.text-muted { color: var(--wp--preset--color--muted); }

/* Die kleinen Auszeichnungen sind versal und weit gesperrt - genau
   die Geste der Wortmarke. Sie liefen bisher auf dem Fliesstext mit
   und fielen deshalb aus dem Schriftwechsel heraus. */
.eyebrow {
  display: block;
  margin: 0 0 var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--titel);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-text);
}

/* Die Zierlinien-Geste des Logos: schmal, waagerecht, mit Abstand.
   Eine einzige Linienstaerke im ganzen System. K5. */
.eyebrow::after {
  content: "";
  display: block;
  height: var(--wp--custom--rule--width);
  margin-top: 0.6rem;
  background: var(--wp--preset--color--accent);
  transition: width var(--wp--custom--transition--slow);
}

/* ------------------------------------------------------------
   Wortweiser Aufbau der Hauptzeile.
   Die Zerlegung macht das Skript, nicht das Markup: ohne Skript
   steht der Satz vollstaendig da. Deshalb wird die Startstellung
   auch erst mit der Klasse .wortweise gesetzt - sonst waere die
   Ueberschrift unsichtbar, wenn das Skript nicht laeuft.

   Bewegt werden nur Deckkraft und Verschiebung, nie Groesse oder
   Position im Fluss. Es gibt also keinen Layout-Sprung.
   ------------------------------------------------------------ */
.display .wort { display: inline-block; }

.display.wortweise .wort {
  opacity: 0;
  transform: translateY(0.34em);
  animation: wort-auf 640ms cubic-bezier(0.16, 0.7, 0.2, 1) forwards;
}

@keyframes wort-auf {
  to { opacity: 1; transform: none; }
}

.display.wortweise .wort:nth-child(1)  { animation-delay:  60ms; }
.display.wortweise .wort:nth-child(2)  { animation-delay: 150ms; }
.display.wortweise .wort:nth-child(3)  { animation-delay: 240ms; }
.display.wortweise .wort:nth-child(4)  { animation-delay: 330ms; }
.display.wortweise .wort:nth-child(5)  { animation-delay: 420ms; }
.display.wortweise .wort:nth-child(6)  { animation-delay: 510ms; }
.display.wortweise .wort:nth-child(7)  { animation-delay: 600ms; }
.display.wortweise .wort:nth-child(8)  { animation-delay: 690ms; }
.display.wortweise .wort:nth-child(9)  { animation-delay: 780ms; }
.display.wortweise .wort:nth-child(10) { animation-delay: 870ms; }
.display.wortweise .wort:nth-child(n+11) { animation-delay: 960ms; }

/* ------------------------------------------------------------
   3. Listen. K1: Aufzaehlungszeichen exakt ausgerichtet,
   gleiche Einrueckung, gleicher Zeilenabstand ueber alle Listen.
   ------------------------------------------------------------ */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list > li {
  position: relative;
  padding-left: 1.375rem;
  margin-bottom: 0.55rem;
  line-height: var(--wp--custom--line-height--body);
}

.list > li:last-child { margin-bottom: 0; }

/* Marker sitzt auf der ersten Zeile, optisch mittig zur x-Hoehe.
   Feste Groesse und feste Position, damit nichts verrutscht. */
.list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--wp--custom--line-height--body) * 0.5em);
  transform: translateY(-50%);
  width: 0.4375rem;
  height: var(--wp--custom--rule--width);
  background: var(--wp--preset--color--accent);
}

.list--plain > li { padding-left: 0; }
.list--plain > li::before { content: none; }

/* ------------------------------------------------------------
   4. Links. K9: weiterfuehrende Links dezent. Nicht fett,
   nicht gross, nicht in Signalfarbe als Flaeche.
   ------------------------------------------------------------ */
a { color: inherit; }

.link-quiet {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  padding-bottom: 0.15rem;
}

.link-quiet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--wp--custom--rule--width);
  background: rgba(0, 48, 91, 0.28);
  transform-origin: left;
  transition:
    background-color var(--wp--custom--transition--state),
    transform var(--wp--custom--transition--state);
}

.link-quiet:hover::after,
.link-quiet:focus-visible::after {
  background: var(--wp--preset--color--accent);
}

.link-quiet .arrow {
  transition: transform var(--wp--custom--transition--state);
}

.link-quiet:hover .arrow,
.link-quiet:focus-visible .arrow {
  transform: translateX(0.2rem);
}

/* Inline-Link im Fliesstext */
.link-inline {
  color: var(--wp--preset--color--ink);
  text-decoration-line: underline;
  text-decoration-color: rgba(0, 48, 91, 0.32);
  text-underline-offset: 0.22em;
  text-decoration-thickness: var(--wp--custom--rule--width);
  transition: text-decoration-color var(--wp--custom--transition--state);
}

.link-inline:hover,
.link-inline:focus-visible {
  text-decoration-color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------
   5. Buttons. Akzent in Hover- und Aktivzustaenden.
   Nie Text auf hellem Akzent ohne geprueften Kontrast.
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: 0;
  border-radius: var(--wp--custom--radius--none);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--wp--custom--transition--state),
    color var(--wp--custom--transition--state),
    box-shadow var(--wp--custom--transition--state);
}

.btn--primary {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
}

/* Kontrast Marineblau auf Logo-Gold: 5.37:1 gegen #071F4E. Geprueft. */
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--wp--preset--color--ink);
  box-shadow: inset 0 0 0 var(--wp--custom--rule--width) rgba(0, 48, 91, 0.24);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  box-shadow: inset 0 0 0 var(--wp--custom--rule--width) var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------
   6. Raster und Container
   K2: Personen- und Kartenraster ausschliesslich mit Grid.
   Keine absolute Positionierung, kein Float.
   ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wp--custom--layout--wide);
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--gutter);
}

.wrap--narrow { max-width: 58rem; }

/* Textspalte: aussen dieselbe Breite wie jede andere Sektion, innen
   auf Lesebreite begrenzt und LINKSBUENDIG. Eine zentrierte Textspalte
   wuerde gegen die linksbuendige Ueberschrift darueber versetzt stehen,
   und optischer Versatz ist bei diesem Kunden ein Kompetenzsignal. */
.wrap--text > * { max-width: var(--wp--custom--layout--content); }

/* Meta-Zeile im Seitenkopf, gleiche Behandlung wie im Hero. */
.page-head__meta {
  margin: var(--wp--preset--spacing--30) 0 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
  max-width: none;
}

/* Kleine Auszeichnung an einer Rechtsgebiets-Kachel, z.B. "Neu im
   Verbund". Dieselbe Geste wie das Fachanwalts-Kennzeichen. */
.rg-card__tag {
  align-self: start;
  padding-top: 0.2rem;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-text);
  border-top: var(--wp--custom--rule--accent);
}

.section {
  padding-block: var(--wp--preset--spacing--70);
}

/* Der warme Ton statt des kuehlen, seit dem 2026-09-16. Begruendung:
   siehe den Kommentar an dieser Sektion im Auftragsverlauf - kurz, weil
   es eine Zeile ist: #F7F9FB war ein blaues Weiss und hob sich von Weiss
   kaum ab; #FAF8F4 ist der Kalkstein-Ton der Bildwelt. */
.section--surface { background: var(--wp--preset--color--surface-warm); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--50);
  align-items: end;
  margin-bottom: var(--wp--preset--spacing--50);
}

.section-head__note {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
  max-width: 30rem;
  justify-self: end;
}

@media (max-width: 52rem) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--30);
  }
  .section-head__note { justify-self: start; }
}

.grid {
  display: grid;
  gap: var(--wp--preset--spacing--40);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 62rem) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* K8: Karten in einer Reihe immer gleich hoch. */
.grid > * { min-width: 0; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--wp--preset--spacing--60);
  align-items: start;
}

@media (max-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--50); }
}

.accent-band { padding-block: var(--wp--preset--spacing--40); }

/* ------------------------------------------------------------
   7. Kopfbereich und Navigation
   Menue oben, horizontal, klassisch. Aufklappen nach unten.
   Aufklapp-Inhalte knapp.
   ------------------------------------------------------------ */
/* Der Kopf klebt oben und liegt damit dauerhaft ueber dem Inhalt.
   Seit dem 2026-07-30 ist er nicht mehr deckend, sondern
   Milchglas - dieselbe Behandlung wie das Blatt hinter dem
   Hero-Logo, damit der Einstieg als ein Bild wirkt und nicht als
   weisse Leiste ueber einem Foto.

   Er steht dichter als das Blatt (72 statt 55 Prozent), und das
   ist Absicht: das Blatt liegt nur ueber dem Hero, den wir
   kennen. Der Kopf wandert ueber die ganze Seite und muss auch
   ueber einem Portraitfoto, einem Beitragsbild oder der
   marineblauen Zeichnung tragen. Gerechnet gegen den dunkelsten
   Fall - die Marineflaechen der Zeichnung - steht die Navigation
   bei rund 7:1, ueber hellen Flaechen darueber. Wer die Deckung
   senkt, muss diesen Fall neu rechnen, nicht den hellen.

   Die Aufklapp-Felder der Navigation bleiben deckend (Abschnitt
   unten): ein Menue, durch das man den Text dahinter sieht, ist
   kein Menue mehr. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  border-bottom: var(--wp--custom--rule--soft);
}

/* Ohne backdrop-filter gaebe es keine Unschaerfe, sondern nur
   einen Schleier - darunter liefe der Text der Seite sichtbar
   durch die Leiste. Dann lieber deckend wie bisher. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head { background: var(--wp--preset--color--base); }
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
  min-height: var(--wp--custom--kopf--hoehe);
}

/* Wortmarke, typografisch nachgebaut: versal, sehr leicht,
   stark erhoehte Laufweite, darunter RECHTSANWAELTE zwischen
   zwei goldenen Zierlinien. Entspricht der Bilddatei.
   Im Kopf gilt ausschliesslich die Schreibweise des Logos:
   PJM PARTNER, ohne Pluszeichen. */
.wordmark {
  display: inline-block;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  padding-block: 0.4rem;
}

/* Die Wortmarke bleibt in der normalen Breite. Sie bildet das Logo
   nach, und das ist nicht schmallaufend, sondern weit gesperrt. */
.wordmark__name {
  font-family: var(--wp--preset--font-family--sans);
  display: block;
  font-size: clamp(1.05rem, 0.85rem + 0.7vw, 1.35rem);
  font-weight: 250;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.wordmark__sub {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.45rem;
  font-size: 0.5625rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--wp--preset--color--ink);
}

.wordmark__sub::before,
.wordmark__sub::after {
  content: "";
  height: var(--wp--custom--rule--width);
  background: var(--wp--preset--color--accent);
}

.nav { display: flex; align-items: center; gap: 0.25rem; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item { position: relative; }

.nav__link {
  display: inline-block;
  padding: 0.6rem 0.85rem;
  /* Martin hat die Menuepunkte zweimal als zu klein benannt.
     Von sm auf md, also von 15 auf 17 Pixel. */
  font-size: var(--wp--preset--font-size--md);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  position: relative;
}

/* Der Strich unter dem Menüpunkt trägt seit dem 2026-09-02 das
   Gold DES LOGOS und nicht mehr den eingestellten Akzent.

   Kundenwunsch aus der Mail vom 2026-09-01: der Strich soll die
   Gold-Intensität der Zierlinien tragen, die im Logo links und
   rechts von RECHTSANWÄLTE stehen. Der Ton wurde am 2026-09-02
   aus assets/logo/pjm-partner.png nachgemessen - alle 853 warmen
   Pixel der Datei messen exakt #AC9268, links wie rechts, ohne
   Verlauf. Der Token --accent-logo trägt genau diesen Wert.

   Deshalb --accent-logo und NICHT --accent: die Seiten stehen
   heute auf [data-accent="orange"], --accent liefert dort
   #F49E00. Der Strich saß damit unmittelbar unter einem Logo,
   dessen Zierlinie anders eingefärbt war als er selbst - zwei
   Striche derselben Geste in zwei Tönen, zehn Zentimeter
   voneinander entfernt. Die feste Bindung ans Logo ist hier
   also kein Umgehen der Stellschraube, sondern ihr Zweck: der
   Akzent-Schalter darf Flächen und Zeichen der Seite drehen,
   aber nicht die Nachbildung des Logos neben dem Logo. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  /* Der Abstand hängt an der Link-Box, nicht an der Schrift, und
     ist damit auf allen Menüpunkten derselbe: am 2026-09-02 auf
     index.html und rechtsgebiete.html gemessen, Grundlinie bis
     Strich-Oberkante 11,52 Pixel bei jedem der sechs Punkte,
     Abweichung 0,00. Der Wert bleibt deshalb unverändert.

     Was der Kunde als ungleichen Abstand sieht, ist die
     Unterlänge: "Rechtsgebiete" ragt mit dem g 3,54 Pixel unter
     die Grundlinie und lässt 7,98 Pixel Luft, alle anderen
     Wörter 11,36. Das ist kein Fehler dieser Regel, sondern
     Typografie - und es geradezuziehen hieße, den Strich unter
     einem einzigen Menüpunkt tiefer zu legen als unter den
     anderen. Die Leiste hätte dann Striche auf zwei Höhen.

     Entscheid der Hauptsession vom 2026-09-02: ALLE Striche
     rücken um die gemessene Unterlängen-Differenz (rund 3,4
     Pixel, 0,2rem) tiefer, von 0.35rem auf 0.15rem. Damit hat
     das g in "Rechtsgebiete" dieselbe Luft, die "Aktuelles"
     bisher zeigte, und die Leiste bleibt auf einer Höhe. */
  bottom: 0.15rem;
  height: var(--wp--custom--rule--width);
  background: var(--wp--preset--color--accent-logo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--wp--custom--transition--state);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__item--current > .nav__link::after,
.nav__item[data-open="true"] > .nav__link::after {
  transform: scaleX(1);
}

/* Aufklappen nach unten. Knappe Stichworte, hoechstens ein Satz. */
/* Die Aufklapp-Felder tragen seit dem 2026-07-30 dasselbe
   Milchglas wie die Leiste darueber - vorher waren sie deckend
   und sassen als weisse Kaesten vor einer durchscheinenden
   Leiste, was den Effekt genau dort brach, wo man ihn ansieht.

   Sie stehen dichter als die Leiste (86 statt 72 Prozent), und
   das ist keine Willkuer: eine Leiste ueberdeckt Flaechen, ein
   Menue ueberdeckt Zeilen. Durch ein Menue hindurch fremden Text
   lesen zu koennen macht beide unlesbar - die Schrift dahinter
   muss verschwinden, nicht nur gedaempft werden. 86 Prozent plus
   die kraeftige Unschaerfe leisten das; gemessen bleibt von einer
   Textzeile darunter kein lesbarer Rest. */
.nav__panel {
  position: absolute;
  top: calc(100% + var(--wp--custom--nav--gap));
  left: 50%;
  transform: translateX(-50%);
  min-width: 20rem;
  max-width: calc(100vw - 2rem);
  background: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
  backdrop-filter: blur(24px) saturate(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
  /* Die Oberkante des Felds läuft seit dem 2026-09-02 im Logo-Gold,
     nicht mehr im Hausakzent: sie liegt unmittelbar unter dem
     Nav-Strich, der seit demselben Tag Logo-Gold trägt (Kundenwunsch
     aus der Mail von Dr. Uhlmannsiek vom 2026-09-01). Zwei Goldtöne
     übereinander wären ein Fehler, den jeder sieht. */
  border-top: var(--wp--custom--rule--width) solid var(--wp--preset--color--accent-logo);
  box-shadow: 0 1px 2px rgba(0, 48, 91, 0.05), 0 18px 40px rgba(0, 48, 91, 0.10);
  padding: var(--wp--preset--spacing--40);
  display: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__panel { background: var(--wp--preset--color--base); }
}

/* Der sichtbare Abstand zwischen Menuepunkt und aufgeklapptem Feld
   waere sonst eine tote Zone: der Zeiger verlaesst dort das <li>,
   und das Feld schliesst sich, bevor man es erreicht. Diese
   unsichtbare Bruecke schliesst die Luecke, ohne sie zu zeigen. */
.nav__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Die Bruecke ueberlappt bewusst in den Menuepunkt hinein. Ein
     absolut gesetztes Kind bezieht sich auf die Polsterkante, nicht
     auf die Rahmenkante; ohne Ueberlappung bliebe genau die Linie
     des Rahmens als Naht offen, und dort reisst der Zeiger ab. */
  top: calc((var(--wp--custom--nav--gap) + 0.25rem) * -1);
  height: calc(var(--wp--custom--nav--gap) + 0.25rem);
}

.nav__item[data-open="true"] .nav__panel { display: block; }

/* Die Rechtsgebiets-Liste traegt vierzehn Eintraege und braucht
   mehr Platz als die vier Punkte unter "Kanzlei". Gehaengt an die
   Markierung, die im Markup ohnehin steht - kein Sonderbaustein.
   Bei zwei Spalten auf 20rem brach jeder einzelne Eintrag um. */
.nav__panel[data-rg-source] {
  min-width: 39rem;
  max-width: min(39rem, calc(100vw - 2rem));
}

.nav__panel[data-rg-source] .nav__panel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nav__panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Der Weg auf die eigene Seite des Menuepunkts.
   "Kanzlei" und "Rechtsgebiete" tragen ein Klappfeld UND haben eine
   eigene Seite. Der Menuepunkt selbst bleibt trotzdem ein <button>:
   ein <a> mit Klappfeld waere am Telefon eine Sackgasse, weil die
   erste Beruehrung navigiert und das Feld nie aufginge. Der Weg auf
   die Seite steht deshalb als erster Eintrag IM Feld - und er muss
   sich von den Gebieten darunter unterscheiden, sonst liest er sich
   als sechzehntes Rechtsgebiet.

   Abgesetzt wird ueber drei Mittel zugleich: volle Breite ueber alle
   Spalten, eine Trennlinie darunter und der groessere Schriftgrad der
   Menueleiste. Die Liste darunter bleibt unveraendert. */
.nav__panel-lead {
  grid-column: 1 / -1;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: var(--wp--custom--rule--soft);
}

.nav__panel-grid .nav__panel-lead a {
  font-size: var(--wp--preset--font-size--md);
  letter-spacing: 0.04em;
}

.nav__panel-grid a {
  display: block;
  padding: 0.4rem 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.35;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  border-bottom: var(--wp--custom--rule--width) solid transparent;
  transition: border-color var(--wp--custom--transition--state);
}

.nav__panel-grid a:hover,
.nav__panel-grid a:focus-visible {
  border-bottom-color: var(--wp--preset--color--accent);
}

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem;
  cursor: pointer;
  color: var(--wp--preset--color--ink);
  font-family: inherit;
}

@media (max-width: 60rem) {
  .nav__toggle { display: inline-flex; }

  /* Der Knopf rueckt an die Sprachwahl heran, statt in der Mitte
     zu stehen.

     Warum das noetig ist: die Kopfzeile ist ein Flex-Kasten mit
     space-between und drei Kindern - Wortmarke, Navigation,
     Sprachwahl. Am Desktop fuellt die Menueleiste die Mitte aus,
     und die Verteilung sieht richtig aus. Am Telefon schrumpft
     die Navigation auf das eine Wort "Menue", und space-between
     setzt es folgerichtig genau in die Mitte - zwischen Logo und
     DE, mit gleich viel Luft auf beiden Seiten. Das war der
     Befund vom 2026-08-03.

     margin-left: auto schluckt die freie Breite links von der
     Navigation. Damit bleibt fuer space-between nichts mehr zu
     verteilen, und die beiden Bedienelemente stehen als Paar
     rechts. Ohne Aenderung an der Reihenfolge im Markup. */
  .nav { margin-left: auto; }
  .nav__list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--wp--preset--color--base);
    border-top: var(--wp--custom--rule--soft);
    border-bottom: var(--wp--custom--rule--soft);
    padding: var(--wp--preset--spacing--30) var(--wp--custom--layout--gutter)
             var(--wp--preset--spacing--40);
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }
  .site-head[data-nav-open="true"] .nav__list { display: flex; }
  .site-head { position: relative; }
  .nav { position: static; }
  .nav__item { position: static; }
  .nav__link { padding: 0.7rem 0; width: 100%; text-align: left; }
  /* Am Telefon derselbe Schritt nach unten wie am Schreibtisch
     (2026-09-02): 0.3rem auf 0.1rem. */
  .nav__link::after { left: 0; right: 0; bottom: 0.1rem; }
  .nav__panel {
    position: static;
    transform: none;
    min-width: 0;
    box-shadow: none;
    padding: 0 0 var(--wp--preset--spacing--30) 0;
    border-top: 0;
    /* Am Telefon dieselbe Linie links statt oben, im selben Logo-Gold
       wie der Nav-Strich (2026-09-02). */
    border-left: var(--wp--custom--rule--width) solid var(--wp--preset--color--accent-logo);
    padding-left: var(--wp--preset--spacing--30);
    margin-bottom: var(--wp--preset--spacing--30);
  }
  /* Am Telefon klappt das Feld im Fluss auf. Es gibt keine Luecke,
     also auch keine Bruecke, die sonst irgendwo Klicks abfangen wuerde. */
  .nav__panel::before { content: none; }
  .nav__panel-grid { grid-template-columns: minmax(0, 1fr); }

  /* Das Rechtsgebiets-Feld braucht hier eine eigene Zeile, obwohl
     dieselbe Regel eine Zeile hoeher schon steht: seine Breiten- und
     Spalten-Vorgaben haengen an .nav__panel[data-rg-source] und
     gewichten damit schwerer als die schlichte Klasse. Ohne diese
     Ueberschreibung behielt es am Telefon seine 39rem und drei
     Spalten - 624 Pixel in einer 375 Pixel breiten Schublade,
     gemessen am 2026-08-03. Der Seitenkoerper lief deshalb nicht
     ueber, weil die Schublade das Feld abschneidet; sichtbar war es
     trotzdem nur zur Haelfte, und der erste Eintrag "Alle
     Rechtsgebiete" ragte mit zwei Dritteln seiner Klickflaeche aus
     dem Bild. */
  .nav__panel[data-rg-source] {
    min-width: 0;
    max-width: none;
  }
  .nav__panel[data-rg-source] .nav__panel-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------
   8. Hero
   Eigenstaendiger Bildcontainer, damit die spaeter gewuenschte
   Treppenhaus-Kamerafahrt ohne Umbau andocken kann.
   ------------------------------------------------------------ */
.hero { position: relative; }

/* Der Hero laeuft unter den Kopf. Gegenstueck zur Hoehe in
   theme-a.css: dort volle Bildschirmhoehe, hier der negative
   Abstand, der ihn um die Kopfhoehe nach oben zieht.

   Der Kopf bleibt im Fluss und klebt weiter; er hat z-index 40
   und zeichnet deshalb ueber dem Hero, ohne dass hier etwas
   gestapelt werden muesste. Rechnerisch faengt der Hero damit
   bei null an und endet genau an der Unterkante des Fensters -
   der naechste Abschnitt beginnt auf den Pixel dort, wo er
   vorher auch begann.

   Nur in Version A: dort ist der Hero bildschirmhoch. Version B
   hat einen niedrigen, redaktionellen Hero, der unter dem Kopf
   stehen soll und nicht hinter ihm. */
:root[data-version="a"] .hero {
  margin-top: calc(-1 * var(--wp--custom--kopf--hoehe));
}

/* contain: paint garantiert, dass vergroesserte oder unscharfe
   Bildebenen die Seitenbreite nicht beeinflussen. Ohne das melden
   skalierte Bilder eine zu breite Seite, auch wenn sie sichtbar
   beschnitten sind. Gilt fuer jede Bildflaeche im System. */
.hero__figure {
  position: relative;
  overflow: hidden;
  contain: paint;
  height: var(--wp--custom--hero--height);
  margin: 0;
  background: var(--wp--preset--color--surface);
}

/* Alle Motive liegen im Markup, sichtbar ist genau eines. Damit
   verzweigt nichts nach Version - die Auswahl trifft allein das
   Attribut [data-hero-motiv] am <html>-Element. */
/* Der Ausschnitt: Zoom und Verschiebung, beide als Tokens.

   Warum nicht object-position allein, wie ueberall sonst im
   System? Weil sie hier nicht viel ausrichtet. Nachgemessen am
   2026-07-30 bei 1440 mal 900: das Treppenhaus-Foto ist 16:9, der
   Hero ist 1,6:1 - flacher als das Bild hoch ist. Bei "cover"
   deckt das Bild die Hoehe damit exakt ab, der senkrechte
   Ueberhang ist NULL, und object-position hat senkrecht schlicht
   nichts zu verschieben. Waagerecht bleiben 160 Pixel Spiel, mehr
   nicht. Erst ein Zoom schafft Reserve, aus der heraus verschoben
   werden kann.

   Die Reihenfolge im transform ist Absicht: geschrieben steht
   translate vor scale, angewendet wird scale zuerst - so beziehen
   sich die Prozentwerte der Verschiebung auf den ungezoomten
   Rahmen und bleiben lesbar.

   Beide Tokens stehen auf neutral und werden nur dort gesetzt, wo
   ein Motiv es braucht. Das ist derzeit allein das warme
   Treppenhaus weiter unten. Fassung A hatte sie einen halben Tag
   lang ebenfalls und laeuft seit dem Abend des 2026-07-30 wieder
   ohne - Begruendung dort. */
.hero__figure img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: var(--wp--custom--image--filter);
  transform:
    translate(
      var(--wp--custom--hero--schub-x, 0),
      var(--wp--custom--hero--schub-y, 0)
    )
    scale(var(--wp--custom--hero--zoom, 1));
}

:root:not([data-hero-motiv]) .hero__figure img[data-motiv="aufblick"],
[data-hero-motiv="aufblick"] .hero__figure img[data-motiv="aufblick"],
[data-hero-motiv="aufblick-treppe"] .hero__figure img[data-motiv="aufblick-treppe"],
[data-hero-motiv="eingang"] .hero__figure img[data-motiv="eingang"],
[data-hero-motiv="lichtschacht"] .hero__figure img[data-motiv="lichtschacht"],
[data-hero-motiv="popart"] .hero__figure img[data-motiv="popart"] {
  display: block;
}

/* ------------------------------------------------------------
   6b. Der zweite Hero-Entwurf

   Ergaenzt am Abend des 2026-08-03. Der Partnerkreis soll die
   Startseite in zwei Entwuerfen sehen koennen, und zwar ohne dass
   der Titelbild-Schalter darunter leidet.

   Deshalb ein eigenes Attribut statt eines weiteren Wertes bei
   data-hero-motiv: dieses haengt bereits am Titelbild-Schalter
   (hell raeumt es weg, dunkel setzt "lichtschacht"). Zwei Schalter
   auf einem Attribut wuerden einander ueberschreiben.

   Diese beiden Regeln stehen NACH dem Block darueber und schlagen
   ihn bei gleicher Spezifitaet. Die erste raeumt alle Motive ab,
   die zweite holt das eine zurueck - in dieser Reihenfolge, sonst
   wuerde die erste auch das eigene Bild treffen.

   Ohne das Attribut passiert hier nichts, und das ist die Vorgabe.
   Wer den Schalter nie sieht - jede Unterseite - merkt von diesem
   Abschnitt nichts.
   ------------------------------------------------------------ */
:root[data-hero-entwurf="spirale"] .hero__figure img[data-motiv] {
  display: none;
}

:root[data-hero-entwurf="spirale"] .hero__figure img[data-motiv="spirale"] {
  display: block;
  /* Der Ausschnitt sitzt hoeher als bei den uebrigen Motiven. Die
     Bilder sind eigens fuer den Hero erzeugt, ihre ruhige Flaeche
     liegt unten links, und dort steht die Wortmarke. Wer mittig
     ausrichtet, schiebt die Spirale aus dem Bild. */
  object-position: 50% 42%;
}

/* Fassung B, ergaenzt am 2026-08-02 als D und bei der Neuordnung
   am 2026-08-03 auf B gerueckt: derselbe Aufblick wie A, nur
   naeher heran. Die offene Frage war nie das Motiv, sondern der
   Ausschnitt - und die Antwort darauf ist eine eigene Fassung
   neben A, keine Aenderung an A. Seit der Neuordnung steht sie
   auch im Schalter direkt daneben.

   NACHGESTELLT am selben Abend. Der erste Versuch stand auf Zoom
   1,45 mit Schub nach links und oben und war nachweislich falsch
   herum: er holte genau die Ecke ins Bild, in der die glatte Wand
   liegt. Operator-Befund woertlich: "es stoert das man rechts so
   viel leere flaeche sieht, ich will so viel treppengelaender
   sehen wie moeglich."

   Jetzt: Zoom 1,9 und Schub nach rechts und unten. Das zeigt den
   linken oberen Teil der Vorlage, und dort liegt das Ringband -
   vier bis fuenf Gelaenderboegen ineinander, die bis an alle vier
   Kanten laufen. Die leere Wand ist vollstaendig aus dem Bild.

   Die Kuppel bleibt ganz. Bei 1,9 mit 14 zu 13 Prozent war sie
   oben angeschnitten, was wie ein Versehen aussieht statt wie
   eine Entscheidung; 15 zu 17 haelt sie vollstaendig im Bild und
   kostet fast kein Gelaender.

   Unten links bleibt eine ruhige Flaeche stehen. Das ist kein
   Rest, sondern der Platz, auf dem die Wortmarke sitzt.

   Positive Werte beim Schub, weil translate das BILD verschiebt
   und nicht den Rahmen: nach rechts geschoben zeigt den linken
   Teil der Vorlage, nach unten den oberen.

   PREIS, gemessen: Die Vorlage ist 2400 Pixel breit. Bei Zoom 1,9
   deckt das bis 1440 Bildschirmbreite (Faktor 1,14), ab 1680 wird
   hochgerechnet (1,33) und ab 1920 sichtbar weich (1,52). Ein
   groesseres Original existiert nicht, geprueft ueber alle
   Bildordner. Wer den Ausschnitt bis in grosse Bildschirme scharf
   will, braucht eine hoeher aufgeloeste Vorlage - genau dafuer
   liegt der Regenerierungs-Prompt in assets/hero/neu/. */
[data-hero-motiv="aufblick-treppe"] .hero__figure img[data-motiv="aufblick-treppe"] {
  object-position: 50% 50%;
  --wp--custom--hero--zoom: 1.9;
  --wp--custom--hero--schub-x: 15%;
  --wp--custom--hero--schub-y: 17%;
}

/* Hochformat braucht eigene Werte, und zwar aus einem rechnerischen
   Grund, nicht aus Geschmack.

   Die Vorlage ist 16:9. Auf einem hochkant gehaltenen Schirm deckt
   sie mit "cover" die Hoehe exakt ab - der senkrechte Ueberhang ist
   NULL, gemessen bei 375 mal 812. Jeder Schub nach unten legt dort
   also sofort einen leeren Streifen am oberen Rand frei, solange
   der Zoom ihn nicht ausgleicht. Der Mindest-Zoom fuer 8 zu 6
   Prozent liegt nachgerechnet bei 1,12.

   Dazu kommt der Bildausschnitt selbst: Zoom 1,9 laesst hochkant
   nur noch die Kuppel und zwei Boegen uebrig, also genau das
   Gegenteil von "so viel Gelaender wie moeglich". 1,2 zeigt den
   ganzen Wirbel mit fuenf Boegen und deckt trotzdem sicher.

   Die Grenze laeuft ueber das Seitenverhaeltnis und nicht ueber die
   Breite, weil das Verhaeltnis die Ursache ist: ein Telefon quer
   hat dasselbe Problem nicht. */
@media (max-aspect-ratio: 4 / 3) {
  [data-hero-motiv="aufblick-treppe"] .hero__figure img[data-motiv="aufblick-treppe"] {
    --wp--custom--hero--zoom: 1.2;
    --wp--custom--hero--schub-x: 8%;
    --wp--custom--hero--schub-y: 6%;
  }
}

/* Fassung A hat bewusst KEINEN eigenen Ausschnitt. Sie laeuft auf
   dem Standard oben: object-position 50 Prozent zu 45, kein Zoom,
   kein Schub.

   Hier standen am 2026-07-30 fuer einen halben Tag Zoom 1,26 und
   ein Schub von 8 zu 9 Prozent. Sie sollten den goldenen Punkt
   tiefer und weiter nach rechts holen, weg von der leeren Wand
   unten rechts. Auf Operator-Wunsch am selben Abend wieder
   zurueckgenommen: der urspruengliche, weitere Ausschnitt zeigt
   den Wirbel vollstaendig, und das ist mehr wert als die
   Diagonale zwischen Punkt und Logo.

   Wer es erneut versuchen will, findet die Messwerte in Commit
   7359a6d. Die Grenze der Uebung bleibt dieselbe: um den goldenen
   Punkt auf die halbe Hoehe zu holen, braeuchte es Zoom 1,9, und
   der schnitte den halben Wirbel weg. Der Weg dorthin fuehrt ueber
   ein anderes Foto, nicht ueber den Ausschnitt dieses einen. */

/* Das warme Treppenhaus stand hier bis zum 2026-08-03 mit einem
   eigenen Ausschnitt (object-position 50% 38%, Zoom 1.12, Schub 5%).
   Die Fassung ist gestrichen, der Ausschnitt deshalb mit. Wer sie
   zurueckholt, braucht diese drei Werte wieder - der Zoom fiel
   kleiner aus als bei den uebrigen Motiven, weil das Bild nur 1280
   Pixel breit ist. */

/* Der Eingang ist ein Raum auf Augenhoehe. Sein Schwerpunkt liegt
   auf den Schildern neben der Tuer, also in der oberen Haelfte. */
[data-hero-motiv="eingang"] .hero__figure img[data-motiv="eingang"] {
  object-position: 50% 40%;
}

/* Die gezeichnete Bildwelt vertraegt die Behandlung der Fotos nicht.
   Der Farblook der Fotos nimmt Saettigung heraus und legt einen
   hellen Schleier auf - bei einem Foto beruhigt das, bei einer
   Zeichnung aus drei Farben nimmt es genau das weg, wofuer sie
   gemacht ist. Deshalb hier volle Farbe und ein duennerer Schleier.
   Beides sind Tokens, kein Sonderweg im Markup. */
:root[data-hero-motiv="popart"] {
  --wp--custom--image--filter: none;
  --wp--custom--hero--overlay: 0.24;
}

/* ============================================================
   Bildwechsel in der gezeichneten Fassung
   ------------------------------------------------------------
   Sechs Stationen liegen uebereinander statt nebeneinander, nur
   die aktive ist zu sehen - drei Motive, jedes gezeichnet und
   fotografiert, im Wechsel (Reihenfolge und Begruendung stehen
   am Markup in index.html). Die Blende ist lang und ohne
   Bewegung im Bild: kein Zoom, kein Schieben. Ein Wechsel, der
   auffaellt, waere schon einer zu viel.

   object-fit deckt die Flaeche auch fuer das eine Foto ab, das
   nicht im 2400x1610-Schnitt vorliegt. */
:root[data-hero-motiv="popart"] .hero__figure img[data-wechsel] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1400ms ease-in-out;
}

:root[data-hero-motiv="popart"] .hero__figure img[data-wechsel][data-aktiv] {
  opacity: 1;
}

/* Die Punkte. Sie sagen zweierlei: es gibt mehr zu sehen, und du
   bestimmst, was. Nur in der gezeichneten Fassung sichtbar. */
.hero-punkte {
  display: none;
  position: absolute;
  left: var(--wp--preset--spacing--50);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
}

:root[data-hero-motiv="popart"] .hero-punkte { display: flex; }

.hero-punkte__liste {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* Weisse Fuellung UND marineblauer Ring. Der Punkt steht ueber
   sechs wechselnden Stationen, und die haben helle wie dunkle
   Flaechen. Auf Weiss traegt der Ring, auf Marineblau die
   Fuellung. Nur eines von beiden waere auf jedem zweiten Bild
   unsichtbar - genau das war der erste Versuch. */
.hero-punkte__punkt {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: var(--wp--custom--rule--width) solid var(--wp--preset--color--ink);
  border-radius: 50%;
  background: var(--wp--preset--color--base);
  cursor: pointer;
  transition: background-color 300ms ease, transform 300ms ease;
}

.hero-punkte__punkt[aria-current="true"] {
  background: var(--wp--preset--color--accent);
  transform: scale(1.4);
}

.hero-punkte__punkt:focus-visible {
  outline: var(--wp--custom--rule--width) solid var(--wp--preset--color--accent);
  outline-offset: 0.25rem;
}

.hero-punkte__halt {
  padding: 0.35rem 0.25rem;
  border: 0;
  /* Derselbe Grund wie bei den Punkten: der Knopf steht auf
     wechselndem Untergrund und braucht eine eigene Flaeche. */
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--ink);
  font-family: inherit;
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  /* Von unten nach oben gelesen, damit die Leiste eine schmale
     Spalte bleibt und nicht in die Bildmitte ragt. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

@media (max-width: 60rem) {
  /* Auf schmalen Geraeten ist links kein Platz neben dem Text.
     Die Leiste legt sich waagerecht unter den Satz. */
  .hero-punkte {
    left: 50%;
    top: auto;
    bottom: var(--wp--preset--spacing--70);
    transform: translateX(-50%);
    flex-direction: row;
  }

  .hero-punkte__liste { flex-direction: row; }

  .hero-punkte__halt {
    writing-mode: horizontal-tb;
    transform: none;
  }
}

/* ============================================================
   Stand der Hero-Zeile
   ------------------------------------------------------------
   Zwei Haltungen, umschaltbar ueber [data-hero-text]. Ohne
   Attribut bleibt es bei der optischen Mitte.

   "mitte": Die Zeile steht auf der Achse des Motivs. Das
   Treppenhaus ist radialsymmetrisch, der Text setzt sich auf
   dieselbe Achse. Ruhig, klassisch, unabhaengig vom Motiv immer
   gleich sicher.

   "unten-links": Die Zeile raeumt die Bildmitte. Wortmarke oben
   links und Zeile unten links bilden eine Spalte, das Motiv
   behaelt seinen eigenen Schwerpunkt. Mehr Bild, leiser Auftritt -
   und der Text steht nicht mehr auf dem hellsten Punkt des Bildes.
   ============================================================ */
:root[data-version="a"][data-hero-text="unten-links"] .hero__inner {
  align-content: end;
  justify-items: start;
  text-align: left;
  /* Unten genug Luft, damit der Scroll-Hinweis in der Mitte
     darunter frei steht und sich nichts beruehrt. */
  padding-block:
    var(--wp--preset--spacing--70)
    calc(var(--wp--preset--spacing--80) + var(--wp--custom--vh) * 2);
}

/* Schmaler als mittig, aber nicht zu schmal. Bei 46rem brach die
   Zeile in drei Teile und "RECHT FUER" stand als Waise oben.
   52rem trifft den Umbruch nach dem Komma - "RECHT FUER
   UNTERNEHMEN," und "FAMILIEN UND VERMOEGEN". Zwei Zeilen, beide
   etwa gleich lang, sauberer linker Rand. */
:root[data-version="a"][data-hero-text="unten-links"] .hero__claim {
  max-width: 52rem;
}

:root[data-version="a"][data-hero-text="unten-links"] .hero .eyebrow::after,
:root[data-version="a"][data-hero-text="unten-links"] .hero .lead {
  margin-inline: 0;
}

/* "oben-rechts": der Stand der Referenz. Am Schreibtisch steht die
   Zeile oben rechts, das Motiv behaelt die ganze untere Flaeche.
   Auf schmalen Geraeten kippt derselbe Wert nach unten links -
   oben rechts waere dort direkt unter dem Menue und ueber der
   hellsten Stelle des Bildes.

   Der Umbruch liegt bei 60rem, derselbe Wert, den die Navigation
   fuer ihren Wechsel nutzt. */
:root[data-version="a"][data-hero-text="oben-rechts"] .hero__inner {
  align-content: start;
  justify-items: start;
  text-align: left;
  padding-block:
    var(--wp--preset--spacing--70)
    calc(var(--wp--preset--spacing--80) + var(--wp--custom--vh) * 2);
}

:root[data-version="a"][data-hero-text="oben-rechts"] .hero__claim {
  max-width: 52rem;
}

@media (min-width: 60.001rem) {
  :root[data-version="a"][data-hero-text="oben-rechts"] .hero__inner {
    align-content: start;
    justify-items: end;
    text-align: right;
    /* Weit genug unter der Navigation, damit die Zeile nicht am
       Menue klebt. Gemessen am Vorbild: dort beginnt die Zeile
       auf rund einem Viertel der Bildhoehe. */
    padding-block: calc(var(--wp--custom--vh) * 24) var(--wp--preset--spacing--70);
    /* Zusaetzlicher Abstand nach rechts. Am rechten Bildrand laeuft
       im Foto das dunkle Gelaender; ohne diesen Einzug endeten die
       Zeilen genau darauf und der Kontrast fiel unter die Schwelle. */
    padding-inline-end: var(--wp--preset--spacing--70);
  }

  /* Deutlich schmaler als in den anderen Staenden. Ueber die halbe
     Breite gesetzt lief die Zeile quer durch das Treppenauge -
     also durch genau den Brennpunkt, den dieser Stand freiraeumen
     soll. Bei 36rem entsteht ein kompakter Block im rechten
     Viertel, dreizeilig, rechtsbuendig. */
  :root[data-version="a"][data-hero-text="oben-rechts"] .hero__claim {
    max-width: 36rem;
  }
}

/* Unter dem Umbruch verhaelt sich "oben-rechts" wie "unten-links".
   Ein Stand, zwei Auspraegungen - nicht zwei Staende, die man
   getrennt pflegen muesste. */
@media (max-width: 60rem) {
  :root[data-version="a"][data-hero-text="oben-rechts"] .hero__inner {
    align-content: end;
  }
}

/* ============================================================
   Traeger hinter dem Hero-Text in der gezeichneten Bildwelt
   ------------------------------------------------------------
   Der weiche Pool ist fuer ein Foto gebaut: er nimmt dem Motiv
   die Struktur, wo Schrift steht. Eine Zeichnung aus drei flachen
   Farben hat keine Struktur, die man wegnehmen koennte - die
   Unschaerfe verwaescht stattdessen genau das, was das Bild
   ausmacht. Deshalb stehen hier vier Traeger zur Wahl, umschaltbar
   ueber [data-hero-traeger]. Ohne Attribut bleibt es beim Pool,
   damit sich nichts hinter dem Ruecken aendert.
   ============================================================ */

/* Kein Traeger. Nur zum Vergleich: gemessen ueber alle vier
   Motive liegt der Kontrast zwischen 1,0 und 1,8 zu 1. Die
   Zeichnung hat in jeder Ecke beides, grosse Marineflaechen und
   grosse weisse - deshalb rettet auch kein Wechsel der
   Schriftfarbe, was auf der einen traegt, verschwindet auf der
   anderen. */
:root[data-hero-motiv="popart"][data-hero-traeger="frei"] .hero__claim::before {
  display: none;
}

/* Feld. Die Antwort auf die Frage "geht es auch ohne Balken".

   Kein Rechteck, keine Kante, keine Unschaerfe - ein weisses
   Feld, das nach aussen auf null ausblendet. Der Witz daran: Es
   verschwindet von selbst, wo es nicht gebraucht wird. Auf den
   hellen Partien der Zeichnung ist Weiss auf Weiss unsichtbar,
   auf den Marineflaechen hebt es den Grund genau so weit, dass
   die Schrift wieder traegt. Ein Traeger, den man nur dort sieht,
   wo er arbeitet.

   Ohne backdrop-filter, deshalb bleibt die Zeichnung darunter
   scharf - das war der Fehler des Pools aus Fassung A. Die
   Radien stehen wieder auf 50 Prozent, sonst schneidet die
   Kastenkante den Verlauf ab (siehe UEBERGABE, dritte Falle). */
:root[data-hero-motiv="popart"][data-hero-traeger="feld"] .hero__claim::before {
  inset: -120% -70%;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mask-image: none;
  -webkit-mask-image: none;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.97) 34%,
    rgba(255, 255, 255, 0.88) 54%,
    rgba(255, 255, 255, 0.45) 76%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Ein Eckschleier ueber die ganze Bildflaeche wurde geprueft und
   wieder ausgebaut: gemessen kam er nur auf 1,8 bis 2,7 zu 1 an
   der schwaechsten Stelle. Ein Verlauf, der bis in die Zeile
   hinein stark genug waere, ist am Ende eine grosse weisse
   Flaeche - also lieber gleich das Feld oben, das dort steht, wo
   die Schrift steht. Zahlen in der UEBERGABE. */

/* Flaeche. Ein ruhiges weisses Feld mit harter Kante, kein
   Verlauf, keine Unschaerfe - die Sprache des Bildes selbst.

   Keine eigene Breite mehr: seit im Hero nur eine Zeile steht,
   bricht sie im vollen Satzspiegel in zwei Zeilen und das Feld
   wird flach und breit. Eine zusaetzliche Verengung machte daraus
   drei Zeilen und einen Block - also weg damit. Der Zuschnitt
   kommt jetzt allein von der Zeile. */
:root[data-hero-motiv="popart"][data-hero-traeger="flaeche"] .hero__claim::before {
  inset: calc(var(--wp--preset--spacing--50) * -1) calc(var(--wp--preset--spacing--60) * -1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--wp--preset--color--base);
  mask-image: none;
  -webkit-mask-image: none;
}

/* Balken. Marineblau ueber die ganze Breite, Schrift in Weiss.
   Der plakativste Weg, und der einzige, bei dem das Bild links und
   rechts vollstaendig unangetastet bleibt. Eng gesetzt, damit ein
   Titelband entsteht und kein Block. */
:root[data-hero-motiv="popart"][data-hero-traeger="balken"] .hero__claim::before {
  inset: calc(var(--wp--preset--spacing--40) * -1) -100vw;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--wp--preset--color--ink);
  mask-image: none;
  -webkit-mask-image: none;
}

:root[data-hero-motiv="popart"][data-hero-traeger="balken"] .hero__claim,
:root[data-hero-motiv="popart"][data-hero-traeger="balken"] .hero .display,
:root[data-hero-motiv="popart"][data-hero-traeger="balken"] .hero .eyebrow,
:root[data-hero-motiv="popart"][data-hero-traeger="balken"] .hero .lead {
  color: var(--wp--preset--color--base);
}

:root[data-hero-motiv="popart"][data-hero-traeger="balken"] .hero .eyebrow::after {
  background: var(--wp--preset--color--accent);
}

/* ============================================================
   Geteilte Buehne. Die Bildform der Fassung C.
   ------------------------------------------------------------
   Alle bisherigen Fassungen bauen auf demselben Prinzip: ein Bild
   fuellt den Schirm, der Text liegt darauf. C bricht damit, und
   zwar bewusst - die alten B und C sind daran gescheitert, dass
   sie sich nur im Motiv unterschieden.

   Hier steht das Bild in der linken Haelfte und hoert dort auf.
   Rechts daneben, auf weissem Grund, steht die Marke. Kein Text
   auf Bild, keine Abdunklung, kein Schleier ueber der Schrift.
   Das wirkt sachlicher und naeher an einer Kanzlei-Seite als an
   einer Marken-Kampagne - und es loest nebenbei das Problem, das
   jeden Text-auf-Bild-Hero begleitet: der Kontrast haengt nicht
   mehr davon ab, welche Stelle des Fotos gerade darunter liegt.

   Unter 60rem gibt es keine zwei Haelften: dort wird das Bild ein
   flaches Band oben, die Marke steht darunter. Nebeneinander auf
   dem Handy waeren zwei Spalten von je 180 Pixeln - beide
   unbrauchbar. Derselbe Umbruchwert, den die Navigation nutzt.
   ============================================================ */
:root[data-hero-form="geteilt"] .hero {
  background: var(--wp--preset--color--base);
}

/* Die Hoehe ist nicht mehr bildschirmfuellend. Eine geteilte
   Buehne, die den ganzen Schirm nimmt, laesst rechts eine sehr
   grosse leere Flaeche stehen - das wirkt nicht ruhig, sondern
   unfertig. */
:root[data-hero-form="geteilt"][data-version="a"] .hero__inner,
:root[data-hero-form="geteilt"][data-version="b"] .hero__inner {
  min-height: 0;
  align-content: center;
  justify-items: start;
  padding-block: 0;
}

/* Schmale Geraete: Bild als Band oben, Marke darunter. */
:root[data-hero-form="geteilt"][data-version="a"] .hero__media,
:root[data-hero-form="geteilt"][data-version="b"] .hero__media {
  position: relative;
  inset: auto;
  width: 100%;
  height: calc(var(--wp--custom--vh) * 42);
  margin: 0 0 var(--wp--preset--spacing--60);
}

:root[data-hero-form="geteilt"] .hero__figure { height: 100%; }

/* Der Schleier faellt weg. Er ist dafuer da, Text auf einem Bild
   lesbar zu halten; hier liegt kein Text auf dem Bild. */
:root[data-hero-form="geteilt"] .hero__figure::after { opacity: 0; }

/* Kein Scroll-Hinweis: die Sektion ist nicht bildschirmfuellend,
   der Inhalt darunter ist ohnehin schon angeschnitten sichtbar. */
:root[data-hero-form="geteilt"] .hero__scroll { display: none; }

@media (min-width: 60.001rem) {
  /* Ab hier zwei Haelften. Das Bild verlaesst den Satzspiegel nach
     links und laeuft bis an den Bildschirmrand; die Marke bleibt
     im Satzspiegel. Dadurch sitzt zwischen Bildkante und Schrift
     immer ein Rand, auch auf sehr breiten Schirmen. */
  :root[data-hero-form="geteilt"][data-version="a"] .hero__media,
  :root[data-hero-form="geteilt"][data-version="b"] .hero__media {
    position: absolute;
    inset: 0 auto 0 0;
    width: 50vw;
    height: auto;
    margin: 0;
  }

  :root[data-hero-form="geteilt"][data-version="a"] .hero__inner,
  :root[data-hero-form="geteilt"][data-version="b"] .hero__inner {
    grid-template-columns: 1fr 1fr;
    min-height: calc(var(--wp--custom--vh) * 74);
    padding-block: var(--wp--preset--spacing--70);
  }

  /* Zweite Spalte. Der Textblock steht damit rechts der
     Bildkante, nie darauf. */
  :root[data-hero-form="geteilt"] .hero__claim {
    grid-column: 2;
    padding-left: var(--wp--preset--spacing--50);
  }
}

/* Das Logo darf hier kleiner sein als auf der vollen Buehne: es
   steht auf Weiss und muss sich gegen kein Bild behaupten. */
:root[data-hero-form="geteilt"] {
  --wp--custom--logo--breite: clamp(13rem, 26vw, 24rem);
}

/* Farblook: einheitlicher Schleier ueber jedem Bild. */
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--custom--image--veil);
  opacity: var(--wp--custom--hero--overlay);
  pointer-events: none;
}

.hero__claim > * + * { margin-top: var(--wp--preset--spacing--40); }

/* Scroll-Hinweis. Existiert in beiden Versionen im Markup, wird
   aber nur dort gezeigt, wo das Bild die ganze Seite fuellt und
   sonst nichts verriete, dass darunter noch etwas kommt. */
.hero__scroll {
  display: none;
  position: absolute;
  left: 50%;
  bottom: var(--wp--preset--spacing--40);
  transform: translateX(-50%);
  z-index: 2;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.hero__scroll-label {
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero__scroll-arrow {
  width: 0.9rem;
  height: 1.65rem;
  animation: hero-scroll-hint 2.4s cubic-bezier(0.4, 0, 0.3, 1) infinite;
}

@keyframes hero-scroll-hint {
  0%, 55%, 100% { transform: translateY(0); opacity: 0.75; }
  25% { transform: translateY(0.4rem); opacity: 1; }
}

/* Vertrauensanker: Zahl statt Adjektiv-Dreiklang. */
.anchor-figure {
  display: block;
  margin-bottom: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--xxl);
  font-weight: var(--wp--custom--weight--display);
  letter-spacing: var(--wp--custom--tracking--display);
  line-height: 1;
  color: var(--wp--preset--color--ink);
}

/* Weiterfuehrender Link am Fuss einer Sektion. Dezent gesetzt (K9). */
.section-more { margin-top: var(--wp--preset--spacing--50); }

/* ------------------------------------------------------------
   8b. Seitenkopf der Unterseiten
   Kein zweiter Hero. Unterseiten steigen ruhig ein, damit die
   Startseite die einzige Buehne bleibt.
   ------------------------------------------------------------ */
.page-head {
  padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
  border-bottom: var(--wp--custom--rule--soft);
}

.page-head__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--wp--preset--spacing--50);
  align-items: end;
}

@media (max-width: 62rem) {
  .page-head__inner { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--30); }
}

/* Auf Unterseiten ist der Einleitungssatz Begleitung, nicht Buehne.
   Er bleibt im Fliesstext-Grad, damit die Ueberschrift fuehrt. */
.page-head .lead {
  margin-top: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 400;
  line-height: var(--wp--custom--line-height--body);
  color: var(--wp--preset--color--muted);
  max-width: 34rem;
}

.page-head__inner > :last-child { justify-self: end; }

@media (max-width: 62rem) {
  .page-head__inner > :last-child { justify-self: start; }
}

/* Sprungleiste. "Lieber kuerzere Seiten, aber dann die
   Moeglichkeit, nochmal woanders hinzuspringen." */
.jumpbar {
  border-bottom: var(--wp--custom--rule--soft);
  padding-block: var(--wp--preset--spacing--30);
  position: sticky;
  top: 5rem;
  z-index: 30;
  background: var(--wp--preset--color--base);
}

.jumpbar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--wp--preset--spacing--40);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jumpbar a {
  font-size: var(--wp--preset--font-size--sm);
  text-decoration: none;
  border-bottom: var(--wp--custom--rule--width) solid transparent;
  padding-bottom: 0.1rem;
  transition: border-color var(--wp--custom--transition--state);
}

.jumpbar a:hover,
.jumpbar a:focus-visible { border-bottom-color: var(--wp--preset--color--accent); }

@media (max-width: 60rem) { .jumpbar { position: static; } }

/* ------------------------------------------------------------
   8c. Anwaltsprofil
   Breites Querformat nach Zweidrittel-Regel, freigestellt wirkend,
   Hintergrund unscharf. Keine runde Foto-Einfassung.
   Der Kopf wird nie beschnitten: das Portrait wird eingepasst,
   die unscharfe Kopie fuellt die Flaeche.
   ------------------------------------------------------------ */
.profile { padding-block: var(--wp--preset--spacing--50) 0; }

.profile__figure {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  contain: paint;
  margin: 0 0 var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--surface);
}

.profile__figure-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(34px) var(--wp--custom--image--filter);
  transform: scale(1.3);
}

/* Zweidrittel-Regel: die Person sitzt im linken Drittel. */
.profile__figure-main {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 22% 50%;
  filter: var(--wp--custom--image--filter);
}

.profile__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--custom--image--veil);
  opacity: 0.28;
  pointer-events: none;
}

@media (max-width: 52rem) {
  .profile__figure { aspect-ratio: 4 / 3; }
  .profile__figure-main { object-position: 50% 50%; }
}

.profile__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--wp--preset--spacing--50);
  align-items: start;
  padding-bottom: var(--wp--preset--spacing--50);
  border-bottom: var(--wp--custom--rule--soft);
}

@media (max-width: 62rem) {
  .profile__head { grid-template-columns: minmax(0, 1fr); }
}

.contact-list { margin: 0; }

.contact-list div + div { margin-top: var(--wp--preset--spacing--30); }

.contact-list dt {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-bottom: 0.25rem;
}

.contact-list dd { margin: 0; font-size: var(--wp--preset--font-size--sm); line-height: 1.55; }

/* ------------------------------------------------------------
   8d. Team-Block auf der Rechtsgebietsseite
   Anwaelte und Assistenz stehen als ein Team, visuell abgestuft,
   aber nicht getrennt. Antwort auf die Kritik, die heutige
   Trennung wirke "sehr hierarchisch".
   ------------------------------------------------------------ */
.team-assist {
  margin-top: var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--40);
  border-top: var(--wp--custom--rule--soft);
}

.team-assist__title {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  font-weight: 500;
}

/* ------------------------------------------------------------
   8e. Stellschrauben-Bedienung
   ------------------------------------------------------------ */
.control { padding-block: var(--wp--preset--spacing--40); border-top: var(--wp--custom--rule--soft); }

.control__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--wp--preset--spacing--40);
  align-items: baseline;
}

@media (max-width: 52rem) {
  .control__head { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--20); }
}

.control__title { margin: 0; font-size: var(--wp--preset--font-size--lg); font-weight: 500; }

.control__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--30);
}

/* Nachgestellter Hinweis unter einer Stellschraube. */
.control__options + p { margin-top: var(--wp--preset--spacing--30); }

.control__btn {
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: var(--wp--preset--spacing--30);
  border: 0;
  background: var(--wp--preset--color--surface);
  box-shadow: inset 0 0 0 var(--wp--custom--rule--width) transparent;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  transition:
    background-color var(--wp--custom--transition--state),
    box-shadow var(--wp--custom--transition--state);
}

.control__btn:hover { background: var(--wp--preset--color--surface-warm); }

.control__btn[aria-pressed="true"] {
  background: var(--wp--preset--color--base);
  box-shadow: inset 0 0 0 var(--wp--custom--rule--width) var(--wp--preset--color--accent);
}

.control__btn strong { display: block; font-weight: 500; margin-bottom: 0.2rem; }
.control__btn span { color: var(--wp--preset--color--muted); }

.control__swatch {
  display: block;
  height: 0.375rem;
  margin-bottom: var(--wp--preset--spacing--20);
}

.control__swatch--logo { background: var(--wp--preset--color--accent-logo); }
.control__swatch--orange { background: var(--wp--preset--color--accent-orange); }
.control__swatch--gelb { background: var(--wp--preset--color--accent-gelb); }

/* ------------------------------------------------------------
   Titelbild der Unterseiten.
   Bewusst ein Streifen und kein zweiter Hero: die Startseite bleibt
   die einzige Buehne. Der Streifen haelt die Bildwelt des Hauses
   durch und kostet nur rund eine Handbreit Hoehe - "es gibt Seiten,
   da scrollst du gefuehlt drei Minuten. So viel brauchen wir gar
   nicht."
   ------------------------------------------------------------ */
.titelbild__figur {
  position: relative;
  overflow: hidden;
  contain: paint;
  height: clamp(7rem, 16vh, 11rem);
  margin: 0;
  background: var(--wp--preset--color--surface);
}

/* Jede Bildwelt liegt im Markup, sichtbar ist genau eine - dieselbe
   Mechanik wie beim Hero, damit der Schalter beide Ebenen zugleich
   umlegt und nirgends ein Foto neben einer Zeichnung steht. */
.titelbild__figur img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: var(--wp--custom--image--filter);
}

:root:not([data-hero-motiv="popart"]) .titelbild__figur img[data-bildwelt="foto"],
:root[data-hero-motiv="popart"] .titelbild__figur img[data-bildwelt="popart"] {
  display: block;
}

/* Der Streifen ist rund 3:1, die Vorlagen sind es nicht. Der
   Beschnitt nimmt also viel Hoehe weg, und wo er das tut, gehoert
   ins Markup: welcher Teil des Motivs traegt, weiss das Bild, nicht
   das Stylesheet. Drei Stufen genuegen. */
.titelbild__figur img[data-fokus="hoch"]  { object-position: 50% 35%; }
.titelbild__figur img[data-fokus="mitte"] { object-position: 50% 48%; }
.titelbild__figur img[data-fokus="tief"]  { object-position: 50% 60%; }

/* Derselbe Farblook wie ueberall. Das ist der Punkt, an dem sich
   die Bildwelt als eine liest und nicht als Sammlung. */
.titelbild__figur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--custom--image--veil);
  opacity: 0.3;
  pointer-events: none;
}

/* Auf der Zeichnung nimmt derselbe Schleier zu viel weg. Sie
   besteht aus drei flachen Farben; was ihn beim Foto beruhigt,
   macht sie hier blass. */
:root[data-hero-motiv="popart"] .titelbild__figur::after { opacity: 0.12; }

/* Der Streifen ist fuer Fotos bemessen, aus denen ein schmaler
   Ausschnitt noch etwas erzaehlt. Eine Zeichnung zerfaellt in
   einem 12:1-Schlitz zu Fragmenten - Linien ohne Gegenstand.
   Deshalb hier hoeher, aber weiterhin deutlich unter einem
   zweiten Hero: die Startseite bleibt die einzige Buehne. */
:root[data-hero-motiv="popart"] .titelbild__figur {
  height: clamp(9rem, 24vh, 16rem);
}

/* ------------------------------------------------------------
   9. Rechtsgebiete
   Eine einzige kanonische Liste speist Startseite, Uebersicht,
   Navigation und Footer. Siehe js/site-data.js.
   ------------------------------------------------------------ */
.rg-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--wp--custom--transition--state);
}

/* Die Groesse blendet weiter ueber, die FARBE nicht mehr.

   Dieselbe Ursache wie beim Zeichen im Aufklapp-Feld weiter unten
   (Abschnitt zu .rg-eintrag__icon, dort ausfuehrlich): eine
   Transition auf color haelt den zuletzt gemalten Wert fest und
   nimmt einen Wechsel der Akzentfarbe am <html>-Element nicht
   mit. Die Karte holte sich ihre Farbe ueber dieselbe Kette und
   waere beim Umschalten genauso stehengeblieben.

   Nur die Farbe ist herausgenommen, Breite und Hoehe blenden
   weiter - die haengen an keinem Token. */
.rg-card__icon {
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    width var(--wp--custom--transition--slow),
    height var(--wp--custom--transition--slow);
}

.rg-card__title {
  margin: 0;
  line-height: 1.25;
}

.rg-card__text {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--line-height--body);
  color: var(--wp--preset--color--muted);
  max-width: none;
}

.rg-card__more {
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--30);
}

/* Die Uebersicht ohne Textzeile, seit dem 2026-08-31: zwoelfmal
   "Zustaendigkeit ansehen" war zwoelfmal dasselbe Wort und nur
   Laerm (Kundenwunsch). Die ganze Karte ist der Verweis; was das
   sagt, uebernimmt jetzt allein der Pfeil am Kartenfuss - er
   steht, wo die Zeile stand, und rueckt beim Zeigen nach rechts,
   dieselbe Geste wie bei den stillen Verweisen im ganzen Haus.

   Der Pfeil trägt seit dem 2026-09-02 die Textfassung des
   Logo-Golds statt die des eingestellten Akzents. Kundenwunsch
   vom 2026-09-01: dieselbe goldene Linie auch an den Zeichen der
   Rechtsgebiets-Übersicht. Vorher stand hier --accent-text, das
   auf [data-accent="orange"] ein #96610A liefert - ein Braun mit
   Orangestich, das neben dem Nav-Strich im Logo-Gold als zweite
   Farbe auffiel. #836A3A ist derselbe Wert, den --accent-text im
   Gold-Modus ohnehin trägt; die Regel bindet ihn nur fest, statt
   ihn am Schalter hängen zu lassen. Kontrast auf Weiß 5,14:1,
   nachgerechnet am 2026-09-02 - der Pfeil bleibt lesbar. */
[data-rg-source="Uebersicht"] .rg-card::after {
  content: "\2192";
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--accent-logo-text);
  font-size: var(--wp--preset--font-size--md);
  line-height: 1;
  transition: transform var(--wp--custom--transition--state);
}

[data-rg-source="Uebersicht"] .rg-card:hover::after,
[data-rg-source="Uebersicht"] .rg-card:focus-visible::after {
  transform: translateX(0.4rem);
}

/* Kompakte Fassung fuer die Startseite.
   Vorbild ist Bick Law: die Rechtsgebiets-Sektion misst dort
   gemessene 188px. Die Beschreibungen stehen auf der Uebersicht,
   nicht auf der Startseite. "Lieber kuerzere Seiten, aber dann
   die Moeglichkeit, nochmal woanders hinzuspringen." */
.rg-card--compact { gap: var(--wp--preset--spacing--20); }
.rg-card--compact .rg-card__title { margin-top: auto; }

/* Kompakte Listendarstellung, z.B. im Footer und in der Uebersicht. */
.rg-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--wp--preset--spacing--50);
}

.rg-list li {
  break-inside: avoid;
  margin-bottom: 0.4rem;
  line-height: 1.45;
}

.rg-list a {
  font-size: var(--wp--preset--font-size--sm);
  text-decoration: none;
  border-bottom: var(--wp--custom--rule--width) solid transparent;
  transition: border-color var(--wp--custom--transition--state);
}

.rg-list a:hover,
.rg-list a:focus-visible { border-bottom-color: var(--wp--preset--color--accent); }

@media (max-width: 40rem) {
  .rg-list { columns: 1; }
}

/* ------------------------------------------------------------
   10. Personen
   K3: Namensfelder liegen nie ueber dem Gesicht.

   Bis zum 2026-08-31 wurde das Portrait vollstaendig eingepasst,
   dahinter lag eine unscharfe Kopie, darueber Farbfilter und
   Schleier - noetig, weil die Altbestand-Portraits von 640x426
   bis 640x872 reichten und ein Zuschnitt Koepfe beschnitten
   haette. Mit dem Alster-Shooting (alle Hochformat, viel Luft
   ueber dem Kopf) ist das vorbei, und der Kunde hat beides
   ausdruecklich abbestellt: kein Grauschleier, keine
   Blur-Raender, die Bilder fuellen ihre Kachel - derselbe
   unbehandelte Look wie auf der Anwaltswand (a.karte).
   Gleiche Bildposition wie dort: center 16 Prozent.
   ------------------------------------------------------------ */
.person {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.person__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  contain: paint;
  background: var(--wp--preset--color--surface);
  margin-bottom: var(--wp--preset--spacing--30);
}

.person__photo-main {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
}

.person__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.2rem;
}

.person__name { margin: 0; line-height: 1.25; }

.person__role,
.person__focus {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.45;
  color: var(--wp--preset--color--muted);
  max-width: none;
}

/* Der Fachanwaltstitel stand bis zum 2026-09-22 im Akzentton (Messing)
   und sprang damit staerker ins Auge als der Name darueber. Mail von
   Martin Moebius und Dr. Uhlmannsiek: "Bei dem jeweiligen Anwalt bitte
   unter Rechtsanwalt etc. den jeweiligen Fachanwaltstitel in demselben
   Blauton wie Rechtsanwalt schreiben." Das ist --muted, derselbe Wert
   wie in .person__role. Die Haarlinie darueber bleibt im Akzent - sie
   trennt Rolle und Titel und war nicht Gegenstand des Hinweises. */
.person__badge {
  align-self: start;
  margin-top: 0.15rem;
  padding: 0.2rem 0;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  border-top: var(--wp--custom--rule--accent);
}

.person__more { margin-top: auto; padding-top: var(--wp--preset--spacing--30); }

/* Referatsleiter steht zuerst und wird im Namen hervorgehoben.
   Die Bildhoehe bleibt bewusst gleich: unterschiedlich hohe
   Portraits in einer Reihe erzeugen versetzte Namenszeilen, und
   optischer Versatz ist bei diesem Kunden ein Kompetenzsignal.
   Alle Ansprechpartner bleiben gleichzeitig sichtbar, keine Rotation. */
.person--lead .person__name { font-size: var(--wp--preset--font-size--xl); }

/* Schlanke Fassung fuer die Startseite: Bild, Name, Rolle.
   Fachanwaltstitel stehen auf der Uebersicht und im Profil.
   "Die Leute wollen glaube ich heute auch nicht so viel wissen." */
.person--slim .person__photo { aspect-ratio: 1 / 1; }
.person--slim .person__badge { display: none; }

/* Assistenz kompakter, aber im selben Team-Block. Antwort auf die
   Kritik, die Trennung wirke "sehr hierarchisch". */
.person--compact { flex-direction: row; gap: var(--wp--preset--spacing--30); align-items: center; }
.person--compact .person__photo { display: none; }
.person--compact .person__body { padding-top: 0; }

/* ------------------------------------------------------------
   11. Beitraege
   ------------------------------------------------------------ */
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.post-card__figure {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  contain: paint;
  margin: 0 0 var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--surface);
}

.post-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Seit dem 2026-09-16 ohne Entsaettigung und ohne Schleier, Kai
     Surmann: "auch in den anderen Highlightbildern sieht das fuer
     mein Auge seltsam aus". Die Artikelbilder sind erzeugt und
     stehen bereits im Farbklang des Hauses - Creme, Messing,
     Marineblau. Ein zweiter Marineblau-Schleier darueber macht aus
     dem Messing Grau. Der Schleier war fuer zugekaufte Fotos
     gedacht, die es hier nicht gibt. */
  transform: scale(var(--wp--custom--card--zoom, 1));
  transition: transform var(--wp--custom--transition--slow);
}

.post-card:hover .post-card__figure img {
  transform: scale(calc(var(--wp--custom--card--zoom, 1) * 1.04));
}

/* Solange nur ein Platzhalter-Motiv vorliegt, sorgen unterschiedliche
   Ausschnitte und Brennweiten dafuer, dass die Sektion beurteilbar
   bleibt und nicht wie achtmal dasselbe Bild wirkt. Kein Inline-Style,
   nur ein Datenattribut. Faellt weg, sobald echte Motive vorliegen. */
[data-crop="2"] .post-card__figure img { object-position: 16% 26%; --wp--custom--card--zoom: 1.55; }
[data-crop="3"] .post-card__figure img { object-position: 86% 70%; --wp--custom--card--zoom: 1.30; }
[data-crop="4"] .post-card__figure img { object-position: 48% 92%; --wp--custom--card--zoom: 2.00; }
[data-crop="5"] .post-card__figure img { object-position: 4% 58%; --wp--custom--card--zoom: 1.70; }
[data-crop="6"] .post-card__figure img { object-position: 96% 12%; --wp--custom--card--zoom: 1.45; }
[data-crop="7"] .post-card__figure img { object-position: 30% 8%; --wp--custom--card--zoom: 1.85; }
[data-crop="8"] .post-card__figure img { object-position: 68% 40%; --wp--custom--card--zoom: 2.20; }

.site-foot__address { margin-top: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--sm); }

.post-card__meta {
  margin: 0 0 0.4rem;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-text);
  max-width: none;
}

.post-card__title {
  margin: 0 0 0.5rem;
  font-family: var(--wp--preset--font-family--titel);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--heading);
  line-height: 1.3;
}

.post-card__text {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
  max-width: none;
}

.post-card__more { margin-top: auto; padding-top: var(--wp--preset--spacing--30); }

/* Querform, dieselbe Grammatik wie die Meldungen auf der Start-
   seite: Bild links, Text rechts, eine durchgehende senkrechte
   Kante durch die Seite.

   Auf einer Uebersicht mit acht Beitraegen zaehlt Dichte doppelt.
   Hochkant in Dreierreihen ergab 420 bis 470 px je Karte und
   1383 px fuer die Sektion, also drei Bildschirme fuer acht
   Ueberschriften. Quer in zwei Spalten halbiert das, ohne dass
   der Vorschautext weichen muss - er ist hier die eigentliche
   Auswahlhilfe und bleibt deshalb stehen, anders als auf der
   Startseite, wo die Meldung nur anreisst.

   Das Bild spannt ueber alle Zeilen, statt einen eigenen Kasten
   zu bekommen: die post-card hat keinen Body-Wrapper, ihre fuenf
   Kinder liegen direkt im Kasten. Ein Wrapper haette acht Stellen
   im Markup gekostet und nichts gekonnt, was grid-row nicht kann. */
/* Dasselbe auto-fit wie bei den Meldungen, aus demselben Grund:
   die Karte bestimmt das Raster. Eigene Klasse statt grid--2,
   weil grid--2 an anderen Stellen ein festes Zweierraster meint
   und das auch bleiben soll. */
.beitrag-raster { grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); }

/* Aktuelles nach Rechtsgebiet gruppiert, seit dem 2026-09-23: mit
   den 39 Beitraegen der alten PJM-Seite traegt ein einzelnes Raster
   nicht mehr. Die Gruppenzeile ist bewusst leise (Eyebrow-Mass), die
   Karten bleiben die Hauptsache. */
.beitrag-gruppe + .beitrag-gruppe { margin-top: var(--wp--preset--spacing--70); }
.beitrag-gruppe { scroll-margin-top: 6rem; }
.beitrag-gruppe__titel {
  margin: 0 0 var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--30);
  border-bottom: 1px solid rgba(0, 48, 91, 0.14);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-text);
}

/* Die Mindesthoehe sitzt an der Karte, nicht am Bild. Am Bild
   gemessen: es spannt alle vier Zeilen, und der Browser legte
   seine 11rem in die erste - die Rubrik wurde auf 170 px
   gestreckt, die Karte auf 388 px. Das Raster wurde damit hoeher
   als das dreispaltige zuvor, also genau das Gegenteil.

   Die letzte Zeile nimmt den Rest (1fr). Dadurch fuellt das Bild
   die volle Kartenhoehe, der Text steht oben und der Verweis
   unten - dieselbe Ordnung, die vorher margin-top:auto erzeugt
   hat, nur im Raster statt im Flex-Kasten. */
.post-card--quer {
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--wp--preset--spacing--40);
  min-height: 11rem;
}

.post-card--quer .post-card__figure {
  grid-column: 1;
  grid-row: 1 / -1;
  aspect-ratio: auto;
  height: 100%;
  margin-bottom: 0;
}

.post-card--quer > :not(.post-card__figure) { grid-column: 2; }

.post-card--quer .post-card__more { margin-top: var(--wp--preset--spacing--30); }

@media (max-width: 30rem) {
  /* Wie bei den Meldungen: erst hier traegt die Textspalte neben
     dem Bild keine Ueberschrift mehr. */
  .beitrag-raster { grid-template-columns: minmax(0, 1fr); }

  .post-card--quer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    min-height: 0;
  }

  .post-card--quer .post-card__figure {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
    height: auto;
    margin-bottom: var(--wp--preset--spacing--30);
  }

  .post-card--quer > :not(.post-card__figure) { grid-column: 1; }
}

/* Kernaussage oben im Beitrag, dann Volltext. */
.summary {
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--surface-warm);
  border-left: 2px solid var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--50);
}

.summary__label {
  margin: 0 0 0.5rem;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-text);
  max-width: none;
}

.summary p { max-width: none; }

.prose > * + * { margin-top: var(--wp--preset--spacing--30); }
.prose h2 { margin-top: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--xl); }
.prose h3 { margin-top: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--lg); }
.prose p { max-width: none; }

/* ------------------------------------------------------------
   12. Dunkles Band und Kontakt
   ------------------------------------------------------------ */
.band-dark { padding-block: var(--wp--preset--spacing--70); }

/* Zwei direkte Wege im Kontaktband, neu am 2026-08-31: dieselben
   Knoepfe wie auf den Profilseiten (btn--primary, btn--ghost) -
   das Band laeuft in Fassung A auf hellem Grund (theme-a.css),
   die Farben passen also unveraendert. */
.kontakt-aktion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
  margin: 0 0 var(--wp--preset--spacing--50);
}

/* theme-a.css faerbt jeden Verweis im Band um - mit Attribut plus
   Element schlaegt das die zwei Klassen des Knopfs, und die weisse
   Schrift des Primaerknopfs wurde Tinte auf Tinte. Drei Klassen
   gewinnen die Spezifitaet zurueck. */
.band-dark .kontakt-aktion .btn--primary { color: var(--wp--preset--color--base); }

.band-dark .kontakt-aktion .btn--primary:hover,
.band-dark .kontakt-aktion .btn--primary:focus-visible { color: var(--wp--preset--color--ink-deep); }

.band-dark .kontakt-aktion .btn--ghost { color: var(--wp--preset--color--ink); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50);
}

@media (max-width: 52rem) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

.contact-grid dt {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  opacity: 0.75;
}

.contact-grid dd { margin: 0; line-height: 1.6; }

/* Die Karte unter den Kontaktdaten. Vor dem Klick eine ruhige
   Flaeche im Ton der Sektion mit dem Datenschutz-Hinweis, nach
   dem Klick der Google-Rahmen in voller Breite. Die Hoehe ist
   fuer beide Zustaende dieselbe, damit der Klick nichts
   verschiebt. Entsaettigt auf ein Fast-Grau: die Karte soll
   den Weg zeigen, nicht mit Googles Farbwelt konkurrieren.

   Die Farben haengen an currentColor, nicht an base oder ink:
   das Kontaktband ist in Version A hell (Tinte auf Papier) und
   in Version B dunkel (Papier auf Tinte), und die Flaeche soll
   in beiden Faellen einfach den Ton der Sektion daempfen. Nur
   der Ladeknopf braucht fuers Ausfuellen ein Farbpaar; das
   liegt bei den Themes. */

/* div.karte statt .karte, korrigiert am 2026-08-24: der Name ist
   im Haus zweimal vergeben (a.karte ist die Personenkachel in
   unterseiten.css). Unqualifiziert griff dieser Abstand auf die
   Anwaltswand durch und hob jede Kachel 64 Pixel aus ihrem Feld -
   unsichtbar, solange die Felder einen eigenen Grund trugen,
   sichtbar seit die Wand offene weisse Fugen hat. */
div.karte { margin-top: var(--wp--preset--spacing--60); }

.karte__facade {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--30);
  min-height: 22rem;
  padding: var(--wp--preset--spacing--50);
  border: var(--wp--custom--rule--width) solid color-mix(in srgb, currentColor 26%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.karte__facade[data-geladen] {
  padding: 0;
  border: 0;
  background: none;
  display: block;
}

.karte__titel {
  margin: 0;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.karte__hinweis {
  margin: 0;
  max-width: 44ch;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
  opacity: 0.85;
}

.karte__laden {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border: var(--wp--custom--rule--width) solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

/* Der Rahmen trug bis zum 2026-08-03 ein
   filter: grayscale(1) contrast(1.04). Das war eine gestalterische
   Entscheidung - die Karte sollte sich der zurueckhaltenden
   Farbwelt der Seite unterordnen und nicht als bunter Fremdkoerper
   darin sitzen.

   Der Operator hat sie gekippt: die Karte soll in Farbe stehen. Der
   Grund ist der bessere: eine entfaerbte Karte ist schwerer zu
   lesen, weil Google seine Flaechen ueber Farbe unterscheidet -
   Gruen fuer Park, Blau fuer Wasser, Gelb fuer die Hauptstrasse.
   In Grau werden daraus vier Toene, die sich aehneln. Wer eine
   Anfahrt sucht, braucht die Unterscheidung.

   Wer die Zurueckhaltung zurueckholen will: die filter-Zeile
   wieder einsetzen. Sie stand genau hier. */
.karte__rahmen {
  display: block;
  width: 100%;
  height: 22rem;
  border: 0;
}

/* Der Datenschutz-Hinweis stand frueher IN der Fassade und
   verschwand mit ihr, sobald die Karte geladen war. Seit die Karte
   ohne Klick laedt, gibt es diesen Moment nicht mehr - der Hinweis
   steht deshalb dauerhaft unter der Karte, klein und ruhig. */
.karte__fussnote {
  margin: var(--wp--preset--spacing--20) 0 0;
  font-size: var(--wp--preset--font-size--xs);
  opacity: 0.7;
}

/* Der Weg-Knopf, ergaenzt am 2026-08-03 fuer die Kontaktseite.

   Er sitzt bewusst NEBEN der Fassade und nicht darin: die Fassade
   wird beim Laden der Karte vollstaendig durch den Rahmen ersetzt
   (siehe .karte__facade[data-geladen] oben), ein Knopf darin waere
   danach fort. Gerade wer die Karte angesehen hat, sucht als
   naechstes die Route.

   Knopf und Erklaerung stehen nebeneinander und brechen um, statt
   sich am Telefon zu draengen. Die Erklaerung ist hier ein <span>
   im Flex-Fluss, deshalb greift die Breitenbegrenzung von
   .karte__hinweis nicht von allein - sie steht darum noch einmal. */
.karte__weg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  margin: var(--wp--preset--spacing--30) 0 0;
}

.karte__weg .karte__hinweis {
  flex: 1 1 22ch;
  max-width: 52ch;
}

/* ------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------ */
.site-foot {
  background: var(--wp--preset--color--base);
  border-top: var(--wp--custom--rule--soft);
  padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

/* ---------- Zwei Spalten im Fuss, 2026-09-10 ----------
   Operator-Vorschlag: das Zeichen links, Impressum und Datenschutz
   untereinander rechts unten. Das ist der Fuss, den Kanzleien
   ueblicherweise tragen - Marke auf der einen, Pflichtangaben auf der
   anderen Seite - und er loest ein Problem, das die reine
   Linksausrichtung offen liess: Der Fuss bestand aus zwei Bloecken
   untereinander, die zusammen kaum eine Bildschirmzeile fuellten und
   rechts daneben eine leere Flaeche stehen liessen.

   Ohne eine Zeile Markup: Der Wrap enthaelt genau die zwei Kinder
   (.site-foot__grid mit dem Zeichen, .site-foot__bottom mit den
   Verweisen). Als Grid werden daraus zwei Spalten - auf allen 38
   Seiten gleichzeitig, ohne dass eine davon angefasst wird.

   align-items: end setzt beide auf dieselbe Grundlinie unten. Das
   Zeichen ist hoeher als die zwei Textzeilen; oben ausgerichtet
   haetten sie in der Luft gehangen. */
.site-foot .wrap {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--50);
}

/* Der Fuss traegt seit dem 2026-08-03 nur noch die Wortmarke.
   Vorher standen daneben zwei Spalten Schnellzugriffe - fuenfzehn
   Rechtsgebiete und sechs Kanzlei-Punkte. Mandanten-Rueckmeldung
   aus dem Telefonat: raus damit.

   Das aendert die Aufgabe des Fusses. Drei Spalten wollen eine
   Kante, an der sie ausgerichtet stehen, also links. Ein einzelnes
   Zeichen will Mitte - links stehend saehe es aus, als fehle
   rechts daneben etwas. Deshalb hier zentriert und nicht bloss die
   Spaltenzahl von drei auf eins gesetzt.

   Die Spaltenregel fuer schmale Schirme ist damit hinfaellig: eine
   Spalte bleibt eine Spalte. */
/* justify-items und text-align am 2026-09-10 von center auf start:
   das Zeichen im Fuss steht seitdem links, Begruendung an
   .site-foot__marke. Der Container hielt es bis dahin mittig, und zwar
   staerker als das margin-inline der Marke - ohne diese beiden Zeilen
   waere die Aenderung dort wirkungslos geblieben. */
/* justify-items und text-align am 2026-09-10 von center auf start,
   margin-bottom auf null: Das Zeichen steht seitdem links, und die
   Verweise stehen nicht mehr darunter, sondern daneben. Der untere
   Abstand hielt die beiden Bloecke auseinander, solange sie
   uebereinander lagen; im Zweispalter schob er allein das Zeichen nach
   oben und liess die Grundlinien um 24 Pixel auseinanderfallen -
   nachgemessen, bevor er fiel. */
.site-foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  text-align: start;
  margin-bottom: 0;
}

/* Das Zeichen im Fuss, neu am 2026-09-10.

   Vom 2026-09-02 bis heute stand hier nichts. An diesem Tag fielen
   die getippte Wortmarke und die Anschrift aus dem Fuss (Mail
   Dr. Uhlmannsiek: "Unter Kontakt ganz unten steht noch einmal das
   Logo und die Anschrift. Dies kann entfallen"). Der Einwand galt
   der Doppelung: auf der Kontaktseite stand die Anschrift zweimal
   untereinander.

   Was blieb, war ein Fuss aus zwei Haarlinien mit vier Zentimetern
   Nichts dazwischen - die obere Kante zur Seite, die untere ueber
   der Rechtszeile. Zwei Linien, die nichts mehr trennten, weil der
   Block zwischen ihnen fehlte. Eine Kante kuendigt Inhalt an; kam
   keiner, las das Auge einen Abbruch.

   Deshalb steht hier jetzt das Zeichen selbst und nicht die Zeile
   von damals: als Bild, ohne die Anschrift, an der der Einwand hing.
   Es ist bewusst kleiner als im Kopf - der Kopf fuehrt, der Fuss
   verabschiedet - und bewusst nicht verlinkt: der Weg zurueck auf
   die Startseite sitzt oben links auf jeder Seite, ein zweiter
   gleichlautender Link darunter waere fuer die Tastatur und den
   Screenreader eine Station ohne Gewinn. alt bleibt darum leer,
   das Bild ist Schmuck und traegt keine eigene Aussage.

   Die untere Haarlinie ist mit dem Zeichen entfallen: sonst stuende
   die Marke in einem Kasten aus zwei Linien. Eine Kante genuegt. */
/* GRÖSSER UND LINKS seit dem 2026-09-10.

   Martins Mail: "Dort könnte das Logo noch etwas grösser gezogen
   werden, auch wenn es dann nicht mehr bündig mit dem Text darunter
   ist."

   Was "bündig" hiess, ist nachgemessen: Das Zeichen stand mit 168
   Pixeln fast genau so breit wie die Zeile "Impressum Datenschutz"
   darunter (152 Pixel), beide mittig - die Aussenkanten fluchteten also
   nahezu. Groesser heisst, dass das Zeichen darueber hinausragt, und
   genau das gibt er frei.

   Von clamp(7.5rem, 11vw, 9.5rem) auf clamp(12rem, 17vw, 15rem), also
   rund sechzig Prozent mehr Breite.

   ZUR AUSRICHTUNG, Operator-Entscheid vom 2026-09-10: links statt
   mittig. Der Satz aus der Mail verlangt das nicht - er spricht nur von
   der Groesse. Es traegt aber unabhaengig davon: Der Fuss war die
   einzige Stelle im ganzen Haus, an der etwas mittig stand. Jede
   Ueberschrift, jeder Absatz, jede Kachel beginnt an der linken Kante
   des Wrap. Ein zentriertes Zeichen darunter setzte eine zweite Achse,
   die sonst nirgends vorkommt - bei 168 Pixeln faellt das kaum auf, bei
   240 schon.

   Der frühere Einwand steht im Absatz darueber: "Ein einzelnes Zeichen
   will Mitte - links stehend saehe es aus, als fehle rechts daneben
   etwas." Das galt fuer das kleine Zeichen. Je groesser es wird, desto
   mehr traegt es die Kante selbst, und desto weniger sieht die freie
   Flaeche rechts nach Verlust aus. */
.site-foot__marke {
  display: block;
  width: clamp(12rem, 17vw, 15rem);
  height: auto;
  margin-inline: 0 auto;
}

/* Die Rechtsgebiets- und Kanzlei-Spalten trugen diese Ueber-
   schriften. Die Regel bleibt vorerst stehen, falls der Fuss
   wieder Spalten bekommt; sie kostet vier Zeilen und nichts an
   Wirkung. */
.site-foot__title {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  font-weight: 500;
}

/* Ebenfalls mittig, damit die Zeile unter dem zentrierten Zeichen
   nicht schief haengt. space-between hatte nur Sinn, solange links
   die Anschrift und rechts die Rechtstexte standen; die Anschrift
   steht seit dem 2026-09-02 nur noch im Kontaktband darueber. */
/* Rechts unten, seit dem 2026-09-10 - Begruendung an .site-foot .wrap.
   Der Block stand vorher mittig unter dem Zeichen. */
.site-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted);
}

/* Untereinander statt nebeneinander. Zwei Verweise nebeneinander in
   einer schmalen Spalte braechen ohnehin um; untereinander ist es eine
   Entscheidung statt eines Zufalls. Der Abstand faellt kleiner aus als
   zwischen zwei Zeilen nebeneinander - senkrecht traegt weniger Luft.

   Seit dem 2026-09-22 stehen beide Woerter linksbuendig, Mail von
   Martin Moebius und Dr. Uhlmannsiek: "Kannst du die Worte Impressum
   und Datenschutz direkt untereinander, also nicht rechtsbuendig
   schreiben?" Rechtsbuendig begannen sie an verschiedenen Stellen -
   jetzt haben sie dieselbe linke Kante. Der Block als Ganzes bleibt
   rechts im Fuss stehen (justify-content am Elternteil). */
.site-foot__bottom ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--wp--preset--spacing--20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-foot__bottom a { text-decoration: none; }
.site-foot__bottom a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Auf schmalen Schirmen gehoert die Ecke unten rechts dem
   Schnellkontakt: dort steht er ab 40rem nicht mehr ueber dem
   Fassungs-Schalter, sondern auf bottom 1rem (Regel weiter oben
   bei .kontakt-schnell). Seine beiden Knoepfe belegen damit die
   unteren 3.75rem des Schirms.

   Die Rechtszeile lag genau dort - auf einem 375er Telefon stand
   "Datenschutz" unter dem Telefonknopf. Vorher fiel das nicht auf,
   weil der leere Fuss ohnehin nach nichts aussah; mit dem Zeichen
   daneben liest man die Zeile als Teil des Absenders und sieht die
   Beruehrung sofort.

   Deshalb hier unten mehr Innenabstand. Derselbe Breakpoint wie bei
   den Knoepfen, damit beide Regeln zusammen kippen.

   Das Zeichen wird am selben Punkt kleiner. Die zwei Spalten bleiben
   auch auf dem Telefon - Marke links, Pflichtangaben rechts traegt
   dort genauso - aber mit 12rem Mindestbreite waere daneben kein Platz
   mehr fuer "Datenschutz". Gerechnet fuer 375 Pixel: 8rem Zeichen plus
   Abstand plus Wort passen, 12rem nicht. */
@media (max-width: 40rem) {
  .site-foot {
    padding-bottom: 5rem;
  }

  .site-foot__marke {
    width: clamp(8rem, 30vw, 11rem);
  }

  .site-foot .wrap {
    gap: var(--wp--preset--spacing--30);
  }
}

/* ------------------------------------------------------------
   14. Versions-Schalter und Platzhalter-Hinweis
   Beides sind Werkzeuge des Entwurfs, nicht der spaeteren Seite.
   ------------------------------------------------------------ */
.switch {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(0, 48, 91, 0.08), 0 8px 24px rgba(0, 48, 91, 0.10);
}

.switch__label {
  padding: 0 0.5rem 0 0.6rem;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.switch__btn {
  min-width: 2rem;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--muted);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition:
    background-color var(--wp--custom--transition--state),
    color var(--wp--custom--transition--state);
}

.switch__btn[aria-pressed="true"] {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
}

/* Fuge zwischen den beiden Gruppen der Leiste: links die
   Hero-Fassungen A bis E, rechts die Bildsprache 1 und 2. Ohne
   sichtbaren Strich laese sich die Reihe als eine einzige, und
   die 1 saehe aus wie eine sechste Fassung. */
.switch__trenner {
  align-self: stretch;
  width: 1px;
  margin: 0.25rem 0.35rem;
  background: var(--wp--preset--color--rule, rgba(0, 48, 91, 0.14));
}

/* Zwei Gruppen brauchen mehr Platz als eine. Umbrechen statt
   ueberlaufen: auf schmalen Schirmen sitzt die Bildsprache dann
   unter den Fassungen, beides bleibt erreichbar. */
.switch { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 2rem); }

/* Der Aufklapp-Knopf. Am Laptop gibt es ihn nicht zu sehen: dort
   stehen die drei Gruppen offen, und ein Knopf, der nichts
   verbirgt, waere nur ein Knopf mehr. */
.switch__auf { display: none; }

@media (max-width: 40rem) {
  .switch { right: auto; left: 1rem; justify-content: flex-start; }

  /* Eingeklappt bleibt genau ein Wort stehen. Drei Gruppen sind am
     Telefon drei Zeilen und nehmen ein Viertel des Schirms - das
     ist zu viel fuer ein Werkzeug, das man alle paar Minuten
     einmal braucht.

     display: none und nicht Sichtbarkeit: die verborgenen Knoepfe
     sollen keinen Platz halten und nicht mit der Tastatur
     erreichbar sein, solange sie niemand sieht. */
  .switch[data-offen="false"] > :not(.switch__auf) { display: none; }

  /* Aufgeklappt bricht jede Gruppe auf eine eigene Zeile. Ohne das
     laeuft die Reihe einfach voll und bricht dort um, wo gerade
     kein Platz mehr ist - beim ersten Versuch stand "Akzent" am
     Ende der zweiten Zeile und "Gold Orange" am Anfang der
     dritten. Eine Beschriftung, die von ihren Knoepfen getrennt
     ist, ordnet nichts mehr.

     Der Umbruch kommt aus dem Trennstrich selbst: auf volle Breite
     gezogen und ohne Hoehe wird aus dem senkrechten Strich ein
     Zeilenwechsel. Kein zusaetzliches Markup, und am Laptop bleibt
     er der Strich, der er ist. */
  .switch__trenner {
    flex-basis: 100%;
    width: auto;
    height: 0;
    margin: 0;
    background: none;
  }

  .switch__auf {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    background: transparent;
    padding: 0.4rem 0.6rem;
    font-family: inherit;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
    cursor: pointer;
  }

  /* Aufgeklappt rueckt der Knopf ans Ende der letzten Zeile und
     wird zum Schliessen benutzt. Deshalb dreht das Zeichen, statt
     das Wort zu wechseln: ein Wort, das die Breite aendert, laesst
     die ganze Leiste springen. */
  .switch__auf-zeichen {
    width: 0.45rem;
    height: 0.45rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
    transition: transform var(--wp--custom--transition--state);
  }

  .switch[data-offen="true"] .switch__auf-zeichen {
    transform: rotate(45deg) translate(-0.05rem, -0.05rem);
  }
}

/* ------------------------------------------------------------
   14b. Schnellkontakt

   Zwei runde Knoepfe unten rechts, auf jeder Seite: anrufen und
   schreiben, ohne erst zum Kontaktblock zu scrollen. Anders als
   der Fassungs-Schalter sind sie Teil der spaeteren Seite, kein
   Werkzeug des Entwurfs. Solange der Schalter existiert, sitzen
   sie ueber ihm; faellt er beim Livegang weg, rutscht nichts -
   der Abstand nach unten bleibt bewusst stehen.

   Dezent heisst hier: klein, im Marineton der Marke, ohne
   Beschriftung - aber mit voller Trefflaeche und einem Hover,
   der die Akzentfarbe traegt. */
.kontakt-schnell {
  position: fixed;
  right: 1rem;
  bottom: 4.25rem;
  z-index: 55;
  display: flex;
  gap: 0.6rem;
}

.kontakt-schnell__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent);
  color: var(--wp--preset--color--base);
  box-shadow: 0 1px 2px rgba(0, 48, 91, 0.16), 0 8px 24px rgba(0, 48, 91, 0.18);
  transition:
    background-color var(--wp--custom--transition--state),
    color var(--wp--custom--transition--state),
    transform var(--wp--custom--transition--state);
}

.kontakt-schnell__knopf svg {
  width: 1.25rem;
  height: 1.25rem;
}

.kontakt-schnell__knopf:hover,
.kontakt-schnell__knopf:focus-visible {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink);
  transform: translateY(-0.1rem);
}

@media (max-width: 40rem) {
  /* Der Fassungs-Schalter weicht auf schmalen Fenstern nach
     links aus; die Ecke unten rechts gehoert dann ganz dem
     Schnellkontakt. */
  .kontakt-schnell { bottom: 1rem; }
}

.notice {
  border-top: var(--wp--custom--rule--soft);
  background: var(--wp--preset--color--surface);
  padding-block: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted);
}

.notice[hidden] { display: none; }

.notice__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
}

.notice__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

.notice__list li { position: relative; padding-left: 0.9rem; }

.notice__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4375rem;
  height: var(--wp--custom--rule--width);
  background: var(--wp--preset--color--accent);
}

.notice__close {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  padding: 0;
}

/* ------------------------------------------------------------
   14c. Sprachwahl im Kopf

   Ergaenzt am 2026-08-03 auf Operator-Wunsch: "ganz oben rechts an
   einer geeigneten Stelle einen DE, und wenn man klickt, kommt ein
   kleines Dropdown mit EN darunter".

   Gebaut als details/summary und damit OHNE eine Zeile JavaScript -
   dasselbe Mittel wie bei den Gruenden auf der Startseite und beim
   Rechtsgebiete-Register. Aufklappen, Schliessen mit Escape und die
   Bedienung per Tastatur bringt der Browser von selbst mit; jede
   eigene Loesung waere hier mehr Code fuer weniger Verhalten.

   Der Umschalter ist bewusst klein und ohne Rahmen im Ruhezustand.
   Er ist eine Nebensache im Kopf und darf der Wortmarke und der
   Navigation nicht die Aufmerksamkeit nehmen. Erst beim Ueberfahren
   und beim Aufklappen tritt er hervor.

   ENGLISCH GIBT ES NOCH NICHT. Der Eintrag traegt deshalb die
   Platzhalter-Markierung .ph und ist kein Verweis, sondern ein
   span mit aria-disabled - er sieht aus wie ein Ziel, verhaelt sich
   aber nicht so, und niemand landet auf einer Seite, die es nicht
   gibt. Sobald die englische Fassung steht, wird aus dem span ein
   a mit href, und die Klasse ph faellt weg.
   ------------------------------------------------------------ */
.sprache {
  position: relative;
  flex: 0 0 auto;
}

.sprache__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4rem 0.6rem;
  border: var(--wp--custom--rule--width) solid transparent;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
  cursor: pointer;
  list-style: none;
  transition: color 200ms ease, border-color 200ms ease;
}

/* Das Dreieck, das Safari und Chrome von sich aus vor ein summary
   setzen, wuerde die Zeile unruhig machen. Es faellt weg; die
   Richtung zeigt der eigene Winkel darunter. */
.sprache__marke::-webkit-details-marker { display: none; }

.sprache__marke:hover,
.sprache[open] .sprache__marke {
  color: var(--wp--preset--color--ink);
  border-color: rgba(0, 48, 91, 0.22);
}

.sprache__marke:focus-visible {
  outline: var(--wp--custom--rule--width) solid var(--wp--preset--color--accent);
  outline-offset: 0.2rem;
}

/* Der Winkel dreht sich beim Aufklappen. Er ist aus zwei Kanten
   eines Quadrats gebaut und braucht damit kein zweites Symbol. */
.sprache__pfeil {
  width: 0.34em;
  height: 0.34em;
  border-right: var(--wp--custom--rule--width) solid currentColor;
  border-bottom: var(--wp--custom--rule--width) solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform 200ms ease;
}

.sprache[open] .sprache__pfeil { transform: translateY(0.06em) rotate(-135deg); }

/* Das Feld haengt am Kopf und schiebt nichts weg. Rechtsbuendig,
   weil der Umschalter am rechten Rand sitzt und ein linksbuendiges
   Feld sonst ueber den Rand hinauslaufen wuerde. */
.sprache__feld {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  min-width: 7rem;
  padding: 0.4rem;
  border: var(--wp--custom--rule--soft);
  background: var(--wp--preset--color--base);
  box-shadow: 0 0.6rem 1.6rem rgba(0, 48, 91, 0.10);
}

.sprache__eintrag {
  display: block;
  padding: 0.45rem 0.6rem;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
}

/* Kein Zeiger und keine Aufhellung beim Ueberfahren: der Eintrag
   ist noch kein Ziel, und er soll auch nicht so wirken. */
.sprache__eintrag[aria-disabled="true"] { cursor: default; }

/* Platzhalter-Markierung im Fliesstext: dezent, nie eine graue Box. */
.ph {
  border-bottom: var(--wp--custom--rule--width) dashed var(--wp--preset--color--accent);
  padding-bottom: 0.05em;
}

/* ------------------------------------------------------------
   15. Bewegung respektiert Systemeinstellungen
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-version="b"] [data-reveal],
  .display.wortweise .wort {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  [data-version="b"] .hero__figure img {
    transform: scale(1.02) !important;
  }
}

/* ============================================================
   Der weiche Pool hinter dem Hero-Text
   ------------------------------------------------------------
   Gebraucht ueberall dort, wo Schrift auf dem Bild liegt: in
   Version A immer, in den Flug-Fassungen auch in Version B.
   Deshalb steht er hier und nicht im Blatt einer Version - sonst
   stuende der Text in Fassung E ohne Traeger auf dem Motiv.
   ============================================================ */
/* Der Pool hinter dem Text. Zwei Schichten in einem Element:
   die Unschaerfe nimmt dem Motiv genau dort die Struktur, wo Schrift
   steht, und der weiche Farbverlauf blutet nach aussen aus, statt an
   einer Kante zu enden. Die Maske sorgt dafuer, dass auch die
   Unschaerfe ausblendet - sonst saehe man ihren Rand als Rechteck.

   Bewusst grosszuegig ueber den Textblock hinaus, damit es wie ein
   Lichtverhalten des Motivs wirkt und nicht wie eine Box.

   DIE REGEL, die hier zaehlt: Die Radien beider Verlaeufe stehen auf
   50% und damit genau auf der Kastenkante. Prozente im radialen
   Verlauf beziehen sich auf die GANZE Kastenbreite und -hoehe, nicht
   auf die halbe - ein Radius ueber 50% laesst den Verlauf also erst
   ausserhalb des Kastens auf null laufen, und die Kante des Elements
   schneidet ihn hart ab. Genau das war die sichtbare Linie quer ueber
   dem Motiv: bei 66% Hoehenradius stand die Maske an der Oberkante
   noch bei 0,37 und der Weissverlauf bei 0,21.

   Die Groesse des Pools haengt deshalb am Kasten, nicht mehr am
   Radius. Die Insets sind so gewaehlt, dass der Pool absolut
   genauso weit traegt wie vorher - gemessen gleiche Deckung ueber
   der Schrift, nur ohne Kante. Wer sie aendert, aendert die Deckung
   und muss den Kontrast neu messen. */
:root[data-version="a"] .hero__claim::before,
:root[data-hero-bewegung="flug"] .hero__claim::before,
:root[data-hero-bewegung="fahrt"] .hero__claim::before {
  content: "";
  position: absolute;
  inset: -77% -62%;
  z-index: -1;
  pointer-events: none;
  /* Der Pool hellt auf, statt abzudunkeln. Die Unschaerfe nimmt dem
     Motiv die Struktur unter der Schrift, die Aufhellung hebt es an,
     und der Farbanteil ist warmes Weiss. So bleibt der Eindruck hell
     und leicht - und die Schrift steht trotzdem sicher. */
  backdrop-filter: blur(30px) brightness(1.24) saturate(0.72);
  -webkit-backdrop-filter: blur(30px) brightness(1.24) saturate(0.72);
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(255, 255, 255, 0.80) 0%,
    rgba(255, 255, 255, 0.68) 40%,
    rgba(255, 255, 255, 0.34) 66%,
    rgba(255, 255, 255, 0.08) 86%,
    rgba(255, 255, 255, 0) 100%
  );
  mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000 0%, #000 34%, rgba(0, 0, 0, 0.72) 58%,
    rgba(0, 0, 0, 0.28) 80%, transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000 0%, #000 34%, rgba(0, 0, 0, 0.72) 58%,
    rgba(0, 0, 0, 0.28) 80%, transparent 100%
  );
}

/* Wo das Milchglas-Blatt hinter dem Logo liegt, tritt der Pool ab.
   Geaendert am 2026-07-30, zusammen mit dem Blatt.

   Beide zusammen waeren doppelt gemoppelt und wuerden einander
   aufheben: der Pool hellt grossflaechig auf, das Blatt noch
   einmal - gerechnet kaeme man auf ueber 90 Prozent Deckung, und
   von der Durchsicht, um die es geht, bliebe nichts. Der Pool
   stammt aus der Zeit, als hier eine Textzeile stand; heute
   steht dort ein Bild auf einem eigenen Traeger.

   Ausgenommen bleibt die gezeichnete Bildwelt: dort traegt das
   Feld (Abschnitt weiter oben), und ohne das liegt die
   marineblaue Wortmarke auf der Zeichnung bei einem Kontrast um
   1,1 - gemessen unlesbar. Ebenso ausgenommen: die geteilte
   Buehne und der Spruch-Modus, beide ohne Blatt. */
:root[data-version="a"]:not([data-hero-motiv="popart"]):not([data-hero-form="geteilt"]):not([data-hero-marke="claim"]) .hero__claim::before {
  display: none;
}

/* Ohne Unterstuetzung fuer backdrop-filter traegt allein der
   Farbverlauf. Dann muss er kraeftiger sein, sonst faellt der
   Kontrast unter die Schwelle. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-version="a"] .hero__claim::before,
  :root[data-hero-bewegung="flug"] .hero__claim::before,
  :root[data-hero-bewegung="fahrt"] .hero__claim::before {
    background: radial-gradient(
      ellipse 50% 50% at 50% 50%,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.74) 50%,
      rgba(255, 255, 255, 0.32) 70%,
      rgba(255, 255, 255, 0) 86%
    );
  }
}

/* ============================================================
   Treppenhaus-Flug
   ------------------------------------------------------------
   Der Hero wird zur Scroll-Strecke: das Bild bleibt stehen, die
   Sequenz laeuft unter der Hand des Nutzers durch. Es gibt kein
   Video, das von allein anspringt - genau der Einwand, den der
   Auftraggeber gegen einen Video-Hero hatte, trifft hier nicht.

   Greift nur bei [data-hero-bewegung="flug"]. Kein eigenes Markup:
   die Leinwand setzt das Skript, die Standbilder bleiben liegen und
   springen ein, wenn die Bewegung aus ist.
   ============================================================ */
:root[data-hero-bewegung="flug"] .hero {
  height: calc(var(--wp--custom--vh) * 340);
  /* Der Pool ragt weit ueber den Textblock hinaus und wuerde die
     Seite sonst horizontal aufschieben. In Version A klammert das
     schon die Versions-Regel; in Version B gibt es sie nicht, und
     die Flug-Fassung E lief dadurch ueber.
     clip statt hidden, damit position:sticky im Inneren lebt. */
  overflow: clip;
}

/* Der Satzspiegel darf die Bildflaeche hier nicht einengen. */
:root[data-hero-bewegung="flug"] .hero__inner {
  display: block;
  max-width: none;
  min-height: 0;
  padding: 0;
  /* Muss die ganze Scroll-Strecke abdecken. Sonst kann das
     angeheftete Bild nur innerhalb der ersten Bildschirmhoehe
     kleben und bleibt danach einfach stehen. */
  height: 100%;
}

:root[data-hero-bewegung="flug"] .hero__media {
  position: sticky;
  top: 0;
  inset-inline: auto;
  /* Ausdrueckliche Breite: in Version A ist der Container sonst
     absolut gesetzt und bezieht seine Breite aus left/right. Beim
     Wechsel auf sticky faellt das weg, und er bliebe 0 breit. */
  width: 100%;
  height: calc(var(--wp--custom--vh) * 100);
  margin: 0;
  z-index: 0;
}

:root[data-hero-bewegung="flug"] .hero__figure {
  height: calc(var(--wp--custom--vh) * 100);
}

/* Der Textblock legt sich ueber den ersten Bildschirm und scrollt
   dann weg. Danach gehoert die Strecke allein dem Flug. */
/* Der Titel liegt fest ueber dem ersten Bildschirm, statt per
   negativem Rand dorthin gezogen zu werden. Der Rand haette sich auf
   die Flusshoehe des angehefteten Bildes bezogen - und die ist in
   einem sticky-Kontext nicht die, die man erwartet. Absolut gesetzt
   ist die Position eindeutig: oben im Hero, eine Bildschirmhoehe
   hoch. Beim Scrollen wandert er mit dem Hero nach oben weg. */
:root[data-hero-bewegung="flug"] .hero__claim {
  color: var(--wp--preset--color--ink);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  margin-top: 0;
  height: calc(var(--wp--custom--vh) * 100);
  display: grid;
  align-content: center;
  justify-items: center;
  max-width: none;
  padding-inline: var(--wp--custom--layout--gutter);
  text-align: center;
}

:root[data-hero-bewegung="flug"] .hero__claim > * {
  max-width: 60rem;
  margin-inline: auto;
}

:root[data-hero-bewegung="flug"] .hero__scroll {
  top: calc(calc(var(--wp--custom--vh) * 100) - 4.5rem);
  bottom: auto;
}

/* Leinwand und Standbild schliessen einander aus. */
.hero__flug {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* --sequenz-ruhe steht am Anfang der Strecke auf 1 und faellt beim
     Scrollen auf 0. Solange sie oben ist, liegt das Bild weich und
     hell hinter dem Titel; danach ist es scharf und die Fahrt laeuft.
     Ohne die Variable ist der Wert 0 - dann aendert sich nichts. */
  filter:
    var(--wp--custom--image--filter)
    blur(calc(var(--sequenz-ruhe, 0) * 16px))
    brightness(calc(1 + var(--sequenz-ruhe, 0) * 0.34))
    saturate(calc(1 - var(--sequenz-ruhe, 0) * 0.45));
}

:root[data-hero-bewegung="flug"] .hero__flug { display: block; }
:root[data-hero-bewegung="flug"] .hero__figure img[data-motiv] { display: none; }

/* Solange die Sequenz laedt, bleibt das Standbild stehen. Ein
   leerer schwarzer Kasten waere das schlechteste Ergebnis. */
:root[data-hero-bewegung="flug"]:not([data-flug="bereit"]) .hero__flug { display: none; }
:root[data-hero-bewegung="flug"]:not([data-flug="bereit"]) .hero__figure img[data-motiv="aufblick"] { display: block; }

/* Ohne Bewegungswunsch bleibt es beim Standbild, auch in D und E. */
@media (prefers-reduced-motion: reduce) {
  :root[data-hero-bewegung="flug"] .hero { height: auto; }
  :root[data-hero-bewegung="flug"] .hero__claim { margin-top: 0; height: auto; }
  :root[data-hero-bewegung="flug"] .hero__flug { display: none !important; }
  :root[data-hero-bewegung="flug"] .hero__figure img[data-motiv="aufblick"] { display: block !important; }
}

/* ============================================================
   Die grosse Kamerafahrt: aussen bis Kanzleituer
   ------------------------------------------------------------
   Baugleich zum Treppenhaus-Flug, nur laeuft hier ein Video statt
   einer Bildsequenz. 29 Sekunden waeren als Einzelbilder rund
   40 MB - als Video mit dichten Schluesselbildern sind es 15.

   Auch hier: kein autoplay, kein loop. Es bewegt sich nur, wenn
   gescrollt wird.
   ============================================================ */
:root[data-hero-bewegung="fahrt"] .hero {
  /* 18 Prozent der Strecke gehen fuer den ruhigen Einstieg drauf.
     Die Hoehe waechst entsprechend mit, damit die Fahrt selbst
     genauso lang bleibt wie vorher. */
  height: calc(var(--wp--custom--vh) * 490);
  overflow: clip;
}

:root[data-hero-bewegung="fahrt"] .hero__inner {
  display: block;
  max-width: none;
  min-height: 0;
  padding: 0;
  height: 100%;
}

:root[data-hero-bewegung="fahrt"] .hero__media {
  position: sticky;
  top: 0;
  inset-inline: auto;
  width: 100%;
  height: calc(var(--wp--custom--vh) * 100);
  margin: 0;
  z-index: 0;
}

:root[data-hero-bewegung="fahrt"] .hero__figure {
  height: calc(var(--wp--custom--vh) * 100);
}

/* Der Titel liegt fest ueber dem ersten Bildschirm, statt per
   negativem Rand dorthin gezogen zu werden. Der Rand haette sich auf
   die Flusshoehe des angehefteten Bildes bezogen - und die ist in
   einem sticky-Kontext nicht die, die man erwartet. Absolut gesetzt
   ist die Position eindeutig: oben im Hero, eine Bildschirmhoehe
   hoch. Beim Scrollen wandert er mit dem Hero nach oben weg. */
:root[data-hero-bewegung="fahrt"] .hero__claim {
  color: var(--wp--preset--color--ink);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  margin-top: 0;
  height: calc(var(--wp--custom--vh) * 100);
  display: grid;
  align-content: center;
  justify-items: center;
  max-width: none;
  padding-inline: var(--wp--custom--layout--gutter);
  text-align: center;
}

:root[data-hero-bewegung="fahrt"] .hero__claim > * {
  max-width: 60rem;
  margin-inline: auto;
}

:root[data-hero-bewegung="fahrt"] .hero__scroll {
  top: calc(calc(var(--wp--custom--vh) * 100) - 4.5rem);
  bottom: auto;
}

/* Dieselbe Leinwand wie beim Flug - nur eine andere Sequenz. */
:root[data-hero-bewegung="fahrt"] .hero__flug { display: block; }
:root[data-hero-bewegung="fahrt"] .hero__figure img[data-motiv] { display: none; }

:root[data-hero-bewegung="fahrt"]:not([data-flug="bereit"]) .hero__flug { display: none; }
:root[data-hero-bewegung="fahrt"]:not([data-flug="bereit"]) .hero__figure img[data-motiv="aufblick"] { display: block; }

@media (prefers-reduced-motion: reduce) {
  :root[data-hero-bewegung="fahrt"] .hero { height: auto; }
  :root[data-hero-bewegung="fahrt"] .hero__claim { margin-top: 0; height: auto; }
  :root[data-hero-bewegung="fahrt"] .hero__flug { display: none !important; }
  .hero__flug { filter: var(--wp--custom--image--filter) !important; }
  :root[data-hero-bewegung="fahrt"] .hero__figure img[data-motiv="aufblick"] { display: block !important; }
}

/* ------------------------------------------------------------
   16. Intro-Sektion "Das Haus"
   Eine einzige senkrechte Achse. Alles zentriert, und weil ALLES
   zentriert ist, entsteht kein optischer Versatz gegen eine
   linksbuendige Ueberschrift - der Grund, aus dem zentrierter Satz
   sonst im Projekt verboten ist (siehe .wrap--text), faellt hier
   also weg.

   Die Sektion hat mehr Luft als jede andere: spacing--80 statt 60.
   Das ist Absicht. Bei Bick traegt genau dieser Weissraum die
   Wirkung, nicht die Typografie allein.
   ------------------------------------------------------------ */
.intro {
  padding-block: var(--wp--preset--spacing--80);
  text-align: center;
}

.intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wortmarke: gross, duenn, weit gesperrt. Seit dem 2026-08-28 in
   den Proportionen des Logos gesetzt (Kundenwunsch aus der Mail vom
   selben Tag: die Schrift unter dem Treppenfoto wich vom Logo ab).
   Die Werte sind am eingebundenen Logo-PNG abgeglichen, Zeile auf
   Zeile bei gleicher Breite: Strichstaerke 290 statt 300, Sperrung
   0.24em statt 0.06em. Das padding-inline-start gleicht die
   Nachlauf-Sperrung des letzten Buchstabens aus, sonst stuende die
   Zeile im zentrierten Satz optisch einen halben Buchstaben links. */
/* SEIT DEM 2026-09-09 traegt die Zeile die Logo-Datei, nicht mehr
   gesetzte Schrift. Kundenwunsch aus der Mail von Martin und Dirk:
   das J von Jost haengt unter der Grundlinie, im Logo sitzt es
   darauf, und die Buchstabenformen weichen ohnehin ab. Begruendung
   im Markup von index.html.

   Die alte Regel, falls die Zeile je wieder gesetzt werden soll:
     padding-inline-start: 0.24em;
     font-family: var(--wp--preset--font-family--condensed);
     font-weight: 290;
     letter-spacing: 0.24em;
     text-transform: uppercase;
   Die Werte waren am Logo abgeglichen, Zeile auf Zeile bei gleicher
   Breite; das padding glich die Nachlauf-Sperrung des letzten
   Buchstabens aus. */
.intro__mark {
  margin: 0;
  max-width: none;
  font-size: clamp(1.75rem, 1rem + 3.4vw, 4rem);
  line-height: 1.04;
  color: var(--wp--preset--color--ink);
}

/* Die Breite folgt derselben Kurve, die vorher die Schriftgroesse
   trug: die gesetzte Zeile war bei 4rem Schriftgrad 8.6-mal so
   breit wie hoch. Damit steht die Wortmarke an jeder Fenstergroesse
   dort, wo vorher die Schrift stand.

   Die Datei liegt als MASKE, nicht als Bild - dieselbe Mechanik wie
   bei den drei Marken der Fusions-Kachel (Abschnitt 29). Die Farbe
   kommt damit aus currentColor und nicht aus der Bilddatei: die
   Wortmarke folgt der Textfarbe ihrer Umgebung, egal ob sie auf
   hellem oder dunklem Grund steht. Ein festes Marineblau-PNG waere
   auf dunklem Grund unsichtbar. */
.intro__mark-bild {
  display: block;
  width: clamp(15.05rem, 8.6rem + 29.24vw, 34.4rem);
  aspect-ratio: 1904 / 176;
  background: currentColor;
  -webkit-mask-image: url("../assets/logo/pjm-partner-wortmarke.png");
          mask-image: url("../assets/logo/pjm-partner-wortmarke.png");
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-position: center;   mask-position: center;
}

/* Das einzige farbige Zeichen der Sektion. Ein Signal auf viel
   Weiss traegt weiter als drei. */
.intro__plus {
  color: var(--wp--preset--color--accent);
  font-weight: 400;
}

/* Die Zierlinien-Geste der Wortmarke, hier zentriert und kurz.
   Dieselbe Linienstaerke wie ueberall sonst (K5). */
.intro__mark::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: var(--wp--custom--rule--width);
  margin: var(--wp--preset--spacing--40) auto 0;
  background: var(--wp--preset--color--accent);
}

/* Der Anspruch: deutlich kleiner als die Marke, damit die Achse
   eine Rangfolge hat statt zweier gleich lauter Zeilen. Folgt der
   Versal-Einstellung der jeweiligen Fassung. */
/* Ohne die Wortmarke darueber (entfallen am 2026-09-16) eroeffnet der
   Anspruch die Sektion und braucht keinen Abstand nach oben mehr. */
.intro__claim {
  margin: 0;
  max-width: 26ch;
  font-family: var(--wp--preset--font-family--condensed);
  font-size: clamp(1.25rem, 0.95rem + 1.3vw, 1.9rem);
  font-weight: var(--wp--custom--weight--heading);
  /* Versal seit dem 2026-09-16, Operator-Entscheid. Bis dahin folgte die
     Zeile der Stellschraube --case--display, und die steht in Fassung A
     auf Normalschrift. Seit die Wortmarke darueber entfallen ist,
     eroeffnet dieser Satz die Sektion allein und traegt deren Gewicht -
     versal steht er wie eine Ueberschrift und nicht wie ein Untertitel
     ohne Titel.

     Die Sperrung darf dabei nicht negativ bleiben: -0.01em ist auf
     Gemischtschrift gerechnet und laesst Versalien aneinanderkleben.
     max() nimmt den groesseren der beiden Werte - in Fassung A die 0.09em
     von hier, in Fassung B deren eigene 0.13em. Die Stellschraube bleibt
     damit wirksam, sie kann die Zeile nur nicht mehr zu eng setzen. */
  letter-spacing: max(0.09em, var(--wp--custom--tracking--display));
  text-transform: uppercase;
  line-height: 1.22;
  color: var(--wp--preset--color--ink);
}

/* Beweiszeile an der Stelle, an der Bick seine Siegel setzt. */
.intro__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--wp--preset--spacing--60) 0 0;
  padding: 0;
  list-style: none;
}

.intro__fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  padding-inline: clamp(1.25rem, 3.5vw, 3rem);
  border-left: var(--wp--custom--rule--soft);
}

.intro__fact:first-child { border-left: 0; }

.intro__figure {
  font-family: var(--wp--preset--font-family--condensed);
  font-size: var(--wp--preset--font-size--xxl);
  font-weight: var(--wp--custom--weight--display);
  letter-spacing: var(--wp--custom--tracking--display);
  line-height: 1;
  color: var(--wp--preset--color--ink);
}

.intro__label {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.intro__text {
  margin: var(--wp--preset--spacing--60) 0 0;
  max-width: 44rem;
  font-size: var(--wp--preset--font-size--md);
  line-height: var(--wp--custom--line-height--body);
  color: var(--wp--preset--color--muted);
}

/* Schmale Fenster: die Trennlinien der Beweiszeile wandern von
   links nach oben, sonst stehen sie bei umgebrochenen Elementen
   an der falschen Kante. */
@media (max-width: 40rem) {
  .intro { padding-block: var(--wp--preset--spacing--70); }

  .intro__facts {
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
    width: 100%;
  }

  /* Der Trenner zwischen den gestapelten Zahlen, neu gefasst am
     2026-09-16.

     Vorher lief hier ein Strich ueber die volle Spaltenbreite.
     Gemessen bei 375 Pixel Fenster: Der Strich war 335 Pixel breit, die
     Beschriftungen darunter 248, 222 und 123. Unter "Rechtsgebiete"
     stand damit ein Wort von 123 Pixeln unter einer Linie von 335 -
     querformatiger Strich ueber mittig gesetztem Text, und das liest
     sich schief, nicht ruhig.

     Jetzt ein kurzer Strich, mittig ueber dem Block, der ihn einleitet.
     Er sitzt damit auf derselben Achse wie Zahl und Beschriftung, und
     die Breite ist dieselbe 3.5rem, die im Haus schon als Zierlinie
     steht. Auf dem Desktop bleibt alles wie es war: dort trennen die
     drei Zahlen senkrechte Linien zwischen Spalten, und die stehen
     richtig. */
  .intro__fact {
    position: relative;
    padding-inline: 0;
    padding-top: var(--wp--preset--spacing--40);
    border-left: 0;
    border-top: 0;
  }

  .intro__fact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 3.5rem;
    height: var(--wp--custom--rule--width);
    transform: translateX(-50%);
    background: rgba(0, 48, 91, 0.12);
  }

  .intro__fact:first-child { padding-top: 0; }
  .intro__fact:first-child::before { content: none; }
}

/* ------------------------------------------------------------
   17. Aktuelles
   Kachel nach dem Muster von Kapellmann: Bild oben, darunter ein
   weisses Feld mit Kategorie und Titel, das Ganze in einem feinen
   Rahmen. Kein Teaser-Text - Kapellmann laesst ihn weg, und die
   Kacheln lesen sich dadurch in einem Blick statt in dreien.

   Farbe kommt ausschliesslich aus den Bildern und dem kleinen
   Winkel vor dem Titel. Die Flaeche bleibt weiss.
   ------------------------------------------------------------ */
.aktuelles__title { margin-bottom: var(--wp--preset--spacing--50); }

.news-card {
  display: flex;
  flex-direction: column;
  border: var(--wp--custom--rule--soft);
  background: var(--wp--preset--color--base);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--wp--custom--transition--state),
              transform var(--wp--custom--transition--state);
}

/* K8: gleiche Hoehe in einer Reihe. Das Bild hat ein festes
   Verhaeltnis, der Textkasten fuellt den Rest.

   Am 2026-08-02 von 3:2 auf 3:1 gedreht - die Bildhoehe ist damit
   halbiert, der Textanteil waechst um denselben Betrag. Das war
   die deutlichste Kritik im Call, von beiden Partnern getragen:
   "Erschlagen mich die Bilder. Da verblasst ja fast der Text, um
   den es eigentlich geht."

   AUSTAUSCH DER MOTIVE: Dieses Verhaeltnis haengt an der Box, nicht
   am Bild. Die Motive liegen als <img src> in der Box und werden
   mit object-fit: cover eingepasst. Ein neues Bild braucht deshalb
   nur einen neuen src - keine Zeile CSS, unabhaengig davon, welche
   Kantenlaengen es mitbringt. Die width/height-Attribute am img
   sind reine Hinweise gegen den Layout-Sprung und duerfen beim
   Austausch mitwandern oder stehen bleiben. */
.news-card__figure {
  margin: 0;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
}

.news-card__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--wp--custom--transition--slow);
}

.news-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  padding: var(--wp--preset--spacing--40);
}

.news-card__meta {
  margin: 0;
  max-width: none;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-text);
}

/* Der Winkel vor dem Titel ist die einzige Farbmarke der Kachel.
   Gebaut aus zwei Rahmenkanten statt aus einem Zeichen, damit er
   nicht an der Schrift haengt und exakt auf der ersten Zeile
   sitzt. */
.news-card__title {
  position: relative;
  margin: 0;
  padding-left: 1.1rem;
  font-family: var(--wp--preset--font-family--titel);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--heading);
  line-height: 1.32;
  color: var(--wp--preset--color--ink);
}

.news-card__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.36rem;
  height: 0.36rem;
  border-top: 2px solid var(--wp--preset--color--accent);
  border-right: 2px solid var(--wp--preset--color--accent);
  transform: rotate(45deg);
  /* Doppelte Grundlinienstaerke, aus dem Token abgeleitet: ein
     Zeichen, keine Trennlinie, deshalb sichtbar staerker als die
     Zierlinien (K5 betrifft Trennbalken, nicht Zeichen). */
}

.news-card:hover,
.news-card:focus-visible {
  border-color: var(--wp--preset--color--accent);
}

.news-card:hover .news-card__figure img,
.news-card:focus-visible .news-card__figure img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .news-card__figure img { transition: none; }
  .news-card:hover .news-card__figure img { transform: none; }
}

/* ------------------------------------------------------------
   18. Team-Wand
   Erst randlos von Fensterkante zu Fensterkante; die Wand traegt
   jetzt denselben seitlichen Rand wie jede andere Sektion (Breite
   und Gutter aus .wrap), damit sie sich einreiht statt an den
   Fensterrand zu stossen. Die Kacheln werden dadurch automatisch
   etwas kleiner - so bleiben zwoelf Felder auch schmaler zweizeilig
   zu sechs.

   Zwoelf Felder gehen ohne Rest durch 6, 4, 3 und 2. Deshalb
   endet das Raster auf KEINER Breite mit einer Luecke, obwohl
   elf eine Primzahl ist. Das ist der eigentliche Grund fuer die
   zwoelfte Flaeche, der Weg zu den Profilen kommt oben drauf.
   ------------------------------------------------------------ */
.team__wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: var(--wp--custom--layout--wide);
  margin: var(--wp--preset--spacing--50) auto 0;
  padding-inline: var(--wp--custom--layout--gutter);
  list-style: none;
}

/* Die Fuge zwischen den Bildern. Sie war der einzige Unterschied
   zwischen den beiden Waenden, zwischen denen der Umschalter
   waehlen liess; seit dessen Ausbau am 2026-08-03 ist sie schlicht
   die Einstellung der einen Wand. Der Klassenname bleibt, weil das
   Markup ihn traegt. */
.team__wall--luft { gap: var(--wp--preset--spacing--30); }

.team__cell { min-width: 0; }

/* Seit dem 2026-09-16 steht der Name UNTER dem Foto und nicht mehr
   darauf. Kai Surmann in seiner Mail vom selben Tag: "gerade bei
   unseren Fotos gefaellt mir der Blauschleier nicht".

   Er hat recht, und der Schleier war nicht Zierde, sondern Traeger:
   Weiss auf einem hellen Portrait braucht eine dunkle Flaeche
   darunter. Ein schwaecherer Verlauf haette den Schleier nur
   verduennt und die Lesbarkeit gekostet. Der Name unter dem Bild
   loest beides auf einmal - und er loest es in die Richtung, in die
   das Haus ohnehin schon zeigt: Auf der Anwaltswand und auf allen
   zwoelf Gebietsseiten stehen dieselben elf Personen laengst mit dem
   Namen unter dem Portrait (.person__body). Die Startseite war der
   einzige Ort, der es anders machte.

   Das Aufdeckfeld beim Zeigen bleibt - es liegt jetzt genau ueber
   dem quadratischen Bildteil, nicht mehr ueber der ganzen Kachel. */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

/* Der Bildrahmen. Seit der Name unter dem Foto steht, ist die
   Kachel hoeher als das Bild und kann das Foto nicht mehr selbst
   beschneiden. Ohne diesen Rahmen ragte beim Zeigen das auf 104%
   gezoomte Portrait ueber das Quadrat hinaus, und das Milchglas
   wuchs bei langen Titeln (Wagner, Palaschinski) ueber den Namen
   (Operator-Befund 2026-09-18). Der Rahmen haelt Foto und Glas
   auf genau dem Quadrat. */
.tile__frame {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  container-type: inline-size;
}

/* Die Portraits liegen in drei verschiedenen Seitenverhaeltnissen
   vor, von 640x507 quer bis 640x863 hoch. object-fit gleicht das
   aus; der Bildausschnitt sitzt bewusst oberhalb der Mitte, weil
   Koepfe im oberen Drittel stehen. */
.tile__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  background: var(--wp--preset--color--surface);
  transition: transform var(--wp--custom--transition--slow);
}

/* Namensschild auf einem Verlauf, nicht auf einem Balken: eine
   harte Kante ueber elf Bildern waere eine Zaesur zu viel. Der
   Ton wird aus dem Tinten-Token gemischt, damit ein spaeterer
   Farbwechsel automatisch mitgeht. */
/* Kein Verlauf mehr, keine Flaeche: Der Name steht auf dem Papier
   der Seite, wie auf jeder anderen Personenkachel des Hauses. */
.tile__plate {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: var(--wp--preset--spacing--30);
}

.tile__name {
  font-family: var(--wp--preset--font-family--condensed);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--heading);
  line-height: 1.15;
}

/* Unter dem Namen steht das Gebiet, nicht die Rolle. */
/* Auf dem dunklen Verlauf trug diese Zeile den reinen Akzent. Auf
   Weiss kommt der auf 1,6:1 und traegt keine Schrift mehr - hier
   steht deshalb die abgedunkelte Textfassung, dieselbe wie in den
   Eyebrows der Seite. */
.tile__kurz {
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-text);
}

/* Die Flaeche, die beim Zeigen an die Stelle des Portraits tritt.
   Bick macht denselben Wechsel; dort traegt sie die Kurzbiografie,
   hier den vollstaendigen berufsrechtlichen Titel.

   Erst deckendes Marineblau, dann Milchglas bei 70% Tinte - das war
   Alexander noch zu dunkel und zu blau. Jetzt 52% Tinte plus eine
   Aufhellung im Weichzeichner (brightness), dieselbe Zutat wie beim
   Hero-Pool. Der Text bleibt lesbar, weil die Tinte immer noch mehr
   als die Haelfte der Flaeche traegt - nur der Rest des Fotos
   scheint jetzt heller durch statt dunkel abgetoent. */
.tile__hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--40);
  /* Nachjustiert am 2026-08-02, von 52% Tinte und brightness 1.15
     auf 64% und 0.95. Kein Geschmacksentscheid, sondern gemessen.

     Grund: Bis heute trug dieser Ueberzug nur die Zeile "Profil
     ansehen". Seit die Spezialisierungen wieder darin stehen,
     traegt er Inhalt, den man lesen koennen muss.

     Die Messung: Weisse Schrift auf dem alten Ueberzug kam ueber
     einer hellen Bildstelle auf 3,18 zu 1 und riss damit die
     Grenze von 4,5. Das war kein theoretischer Fall - nachgemessen
     an den elf Portraits erreichen die hellsten fuenf Prozent der
     Bildflaeche bei wagner-philipp.jpg die Luminanz 1,0 und bei
     palaschinski-sophie.jpg 0,985. Die Hintergruende sind dort
     ausgebrannt weiss.

     Mit 64% und 0.95 liegt der schlimmste Fall bei 4,77 zu 1.
     Das ist die sparsamste Kombination mit Reserve; 62% und 0.95
     haetten mit 4,51 nur knapp gehalten. Beide Werte bleiben
     deutlich unter den 70%, mit denen dieser Ueberzug angefangen
     hat - das Milchglas bleibt Milchglas.

     Die Rechnung ist konservativ: blur(22px) mittelt die
     Bildflaeche unter der Schrift, der tatsaechliche Untergrund
     ist also nie so hell wie die hellste Stelle.

     Nachjustiert am 2026-09-18 (Operator: "einen Tick heller"):
     Dunkel wirkte das Glas vor allem ueber den Anzuegen, dort
     summierten sich dunkles Foto und 64% Tinte. contrast(0.75)
     zieht das Foto unter dem Glas zur Mitte - dunkle Stellen werden
     heller, ausgebrannte etwas gedaempft. Deshalb kann die Tinte auf
     55% sinken, ohne dass der schlimmste Fall stark nachgibt:
     Weiss auf ausgebranntem Hintergrund 4,19 zu 1 statt 4,77, und
     die Unschaerfe mittelt real darunter. Der leichte Schatten unter
     der Schrift faengt den Rest ab.

     Die Schrift steht ausdruecklich auf Weiss: Seit dem 2026-09-16
     traegt .tile die Tintenfarbe (Name unter dem Foto), und das
     Glas hatte sie geerbt - Dunkelblau auf Dunkelblau. */
  color: var(--wp--preset--color--base);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--ink-deep) 45%, transparent);
  background: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
  backdrop-filter: blur(22px) brightness(1.05) contrast(0.75) saturate(1.05);
  -webkit-backdrop-filter: blur(22px) brightness(1.05) contrast(0.75) saturate(1.05);
  opacity: 0;
  text-align: center;
  transition: opacity var(--wp--custom--transition--state);
}

/* Ohne backdrop-filter bliebe die Tinte bei 70% halbtransparent und
   das Foto schiene ungeweicht durch - Kontrastrisiko. Dann lieber
   deckend wie zuvor. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tile__hover { background: var(--wp--preset--color--ink); }
}

.tile__line {
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.4;
}

/* Die zweite Zeile im Aufdeckfeld traegt die Akzentfarbe - immer,
   nicht nur bei manchen.

   Bis zum 2026-08-03 hing das an der Klasse --badge, und die
   trugen nur die sieben Personen mit Fachanwaltstitel. Bei Jacobi,
   Surmann und Wagner steht in derselben Zeile die Liste ihrer
   Rechtsgebiete, ohne Titel und darum ohne Klasse - die Zeile
   blieb grau. Beim Ueberfahren der Wand sprang die Farbe also von
   Kachel zu Kachel an und aus. Operator-Befund aus dem Telefonat:
   "einige haben orange Schrift, bei anderen fehlt sie."

   Deshalb jetzt ueber die Stellung statt ueber die Klasse: was
   nach der ersten Zeile kommt, ist in jeder Kachel die fachliche
   Zeile und steht im Akzent. Das haelt auch, wenn jemand einen
   Titel dazubekommt oder verliert - dann aendert sich der Text,
   nicht die Farbe.

   Die Klasse --badge bleibt im Markup stehen. Sie sagt weiterhin
   etwas Wahres aus (hier steht ein Fachanwaltstitel) und kostet
   nichts; nur die Farbe haengt nicht mehr an ihr. */
.tile__hover .tile__line + .tile__line {
  color: var(--wp--preset--color--accent);
}

/* Kleiner und enger gesperrt als das uebrige Label-Muster der Seite,
   und bewusst einzeilig: bei Palaschinski - der einzigen Kachel mit
   zwei Fachanwaltstiteln in der Zeile darueber - sprengte die volle
   Label-Groesse in Variante 2 (schmalere Kachel durch die Fuge) die
   Kachelhoehe. Wirkt bei allen anderen Kacheln nur dezent kompakter. */
.tile__more {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tile:hover .tile__hover,
.tile:focus-visible .tile__hover { opacity: 1; }

/* Schmale Kacheln (sechs Spalten knapp ueber dem Umbruch auf vier,
   das Quadrat misst dann rund 170px): Die langen Titelzeilen von
   Palaschinski, Uhlmannsiek, Moebius und Weinrich passten mit der
   vollen Fuge nicht mehr ins Quadrat und wurden am Rahmen
   abgeschnitten. Hier ruecken Rand, Abstand und Schrift enger. */
@container (max-width: 15rem) {
  .tile__hover {
    gap: var(--wp--preset--spacing--20);
    padding: var(--wp--preset--spacing--20);
  }
  .tile__line {
    font-size: var(--wp--preset--font-size--xs);
    line-height: 1.3;
  }
}

.tile:hover .tile__photo,
.tile:focus-visible .tile__photo { transform: scale(1.04); }

/* Die zwoelfte Flaeche. Kein Portrait, sondern der Weg weiter. */
/* Kein festes Quadrat mehr: Die Nachbarkacheln sind seit dem
   2026-09-16 um die Namenszeile hoeher. stretch im Raster gibt der
   Flaeche genau deren Hoehe. */
.tile-cta {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--wp--preset--spacing--20);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--ink-deep);
  color: var(--wp--preset--color--base);
  text-decoration: none;
}

.tile-cta__label {
  font-family: var(--wp--preset--font-family--condensed);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--heading);
  line-height: 1.15;
}

.tile-cta__note {
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.35;
  color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
}

.tile-cta__arrow {
  margin-top: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1;
  color: var(--wp--preset--color--accent);
  transition: transform var(--wp--custom--transition--state);
}

.tile-cta:hover .tile-cta__arrow,
.tile-cta:focus-visible .tile-cta__arrow { transform: translateX(0.25rem); }

@media (max-width: 74rem) {
  .team__wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 52rem) {
  .team__wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
  .team__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile__name { font-size: var(--wp--preset--font-size--md); }
}

/* Ohne Zeigegeraet gibt es kein Hover. Dort steht die Platte
   dauerhaft, und die Flaeche bleibt unsichtbar. */
@media (hover: none) {
  .tile__hover { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tile__photo,
  .tile-cta__arrow { transition: none; }
  .tile:hover .tile__photo { transform: none; }
}

/* Kein Farbschleier auf den Portraits. Ein Duoton über Gesichtern
   wurde geprüft und verworfen: er nimmt den Bildern die Natürlich-
   keit und wirkt über Anwaltsportraits werblich. Die Bilder laufen
   unbehandelt. */

/* ------------------------------------------------------------
   18b. Umschalter der Wand - entfallen am 2026-08-03.

   Hier stand der Schalter zwischen drei Anordnungen (Bild an Bild,
   mit Abstand, Namensregister) samt der Regel, die immer nur die
   gewaehlte Wand sichtbar machte. Martin hat sich entschieden: es
   bleibt die Fassung mit Abstand.

   Wichtig beim Ausbau, weil es die Sektion sonst leer gelassen
   haette: die Waende lagen auf display: none und wurden erst vom
   gewaehlten Radiofeld auf grid gesetzt. Ohne Radiofelder waere
   also gar keine Wand mehr zu sehen gewesen. Die Fuge, die die
   Fassung ausmachte, steht jetzt direkt an der Wand selbst
   (Abschnitt 18, .team__wall--luft).
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   19. Rechtsgebiete als EINE helle Kachel

   Zwei Vorfassungen liegen hinter dieser: fuenfzehn offene Karten
   (zu hoch, zu beliebig) und drei farbige Vollflaechen in Marine,
   Orange und Tiefblau. Die Farbflaechen loesten das Hoehenproblem
   und schufen ein Farbproblem - nach einer hellen, ruhigen Start-
   seite sind drei Vollflaechen ein Bruch.

   Jetzt: eine helle Kachel auf der Flaechenfarbe der Sektion.
   Blau erscheint ausschliesslich als LINIE - Umriss aussen, feine
   Fugen innen - und nirgends als gefuellte Flaeche. Damit bleibt
   die Sektion im Duktus des Restes.

   Der frueher hier vorgebrachte Einwand ("eine Flaeche, die nur
   von einer Linie begrenzt wird, hat kein Gewicht") stimmt fuer
   viele kleine Kaesten nebeneinander. Er stimmt nicht fuer EINEN
   Koerper, der die volle Satzbreite haelt: Gewicht kommt hier aus
   der Groesse, nicht aus der Fuellung.
   ------------------------------------------------------------ */
.rg-kachel {
  border: var(--wp--custom--rule--width) solid
          color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent);
  background: var(--wp--preset--color--base);
  transition: border-color var(--wp--custom--transition--state),
              box-shadow var(--wp--custom--transition--state);
}

/* Geschlossen reagiert die ganze Kachel auf das Zeigen, weil die
   ganze Kachel der Schalter ist. Geoeffnet nicht mehr: dann sind
   die Eintraege die Ziele, und ein mitlaufender Rahmen wuerde mit
   ihnen konkurrieren. */
.rg-kachel:not([open]):hover,
.rg-kachel:has(.rg-kachel__kopf:focus-visible) {
  border-color: var(--wp--preset--color--ink);
}

.rg-kachel[open] {
  border-color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
}

/* Die statische Fassung der Startseiten-Kachel (seit 2026-09-03):
   kein details/summary mehr, kein Zeiger, kein Rahmenwechsel beim
   Zeigen - die Gebiete stehen einfach da. */
.rg-kachel--statisch,
.rg-kachel--statisch:hover {
  border-color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
}
.rg-kachel--statisch .rg-kachel__kopf { cursor: default; }

.rg-kachel__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem var(--wp--preset--spacing--50);
  padding: var(--wp--preset--spacing--50);
  cursor: pointer;
  list-style: none;
}

.rg-kachel__kopf::-webkit-details-marker { display: none; }
.rg-kachel__kopf::marker { content: ""; }

.rg-kachel__eyebrow,
.rg-kachel__titel,
.rg-kachel__unter { grid-column: 1; }

.rg-kachel__eyebrow { margin-bottom: var(--wp--preset--spacing--20); }

/* Diese Zeile ist die Sektionsueberschrift. Sie traegt deshalb den
   Schriftgrad der uebrigen Sektionstitel, nicht den einer Kachel.

   hyphens wie in .headline: die Grundregel fuer h1 bis h4 erlaubt
   den Bruch INNERHALB eines Wortes (overflow-wrap: break-word).
   Ohne Trennzeichen stand hier bei 768 Pixeln "Rechtsgebie / te".
   Mit auto faellt die Trennung an eine Silbengrenze und bekommt
   ihren Strich - und dank der Umbruchregel weiter unten kommt sie
   im Regelfall gar nicht erst vor. */
.rg-kachel__titel {
  margin: 0;
  font-family: var(--wp--preset--font-family--condensed);
  font-size: var(--wp--preset--font-size--display);
  font-weight: var(--wp--custom--weight--display);
  letter-spacing: var(--wp--custom--tracking--display);
  line-height: 1.08;
  hyphens: auto;
  hyphenate-limit-chars: 12 4 4;
  color: var(--wp--preset--color--ink);
}

.rg-kachel__unter {
  margin-top: var(--wp--preset--spacing--20);
  max-width: 46ch;
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.45;
  color: var(--wp--preset--color--muted);
}

/* Rechte Spalte: Wortmarke des Zustands plus Zeichen. Ein Plus
   allein sagt nicht, was passiert; das Wort daneben schon. Beide
   Woerter liegen uebereinander im selben Raster, damit die Breite
   beim Umschalten nicht springt. */
.rg-kachel__hinweis {
  display: grid;
  grid-column: 2;
  grid-row: 1 / -1;
  grid-template-columns: auto auto;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
}

.rg-kachel__wort {
  grid-area: 1 / 1;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
  text-align: right;
  color: var(--wp--preset--color--ink);
}

.rg-kachel__wort--auf { visibility: hidden; }
.rg-kachel[open] .rg-kachel__wort--zu { visibility: hidden; }
.rg-kachel[open] .rg-kachel__wort--auf { visibility: visible; }

.rg-kachel__sign {
  position: relative;
  grid-area: 1 / 2;
  width: 2.6rem;
  height: 2.6rem;
  border: var(--wp--custom--rule--width) solid
          color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent);
  border-radius: 50%;
  transition: background-color var(--wp--custom--transition--state),
              border-color var(--wp--custom--transition--state);
}

.rg-kachel__sign::before,
.rg-kachel__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.95rem;
  height: var(--wp--custom--rule--width);
  background: var(--wp--preset--color--ink);
  transform: translate(-50%, -50%);
  transition: transform var(--wp--custom--transition--state);
}

.rg-kachel__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.rg-kachel[open] .rg-kachel__sign::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.rg-kachel__kopf:hover .rg-kachel__sign,
.rg-kachel__kopf:focus-visible .rg-kachel__sign {
  border-color: var(--wp--preset--color--ink);
  background: color-mix(in srgb, var(--wp--preset--color--ink) 7%, transparent);
}

.rg-kachel__body { animation: rg-auf var(--wp--custom--transition--slow) both; }

@keyframes rg-auf {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to   { opacity: 1; transform: none; }
}

/* Die Gebiete in drei Spalten. Getrennt wird mit ECHTEN Rahmen an
   den Zellen, nicht mit einer eingefaerbten Rasterfuge. Grund: bei
   zwei Spalten bliebe die letzte Zelle allein in ihrer Reihe, und
   eine Fuge wuerde daneben als gefuellter Block stehen. Rahmen an
   der Zelle kennen dieses Problem nicht. */
.rg-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.rg-liste__cell { border-top: var(--wp--custom--rule--soft); }

.rg-liste__cell:not(:nth-child(3n + 1)) { border-left: var(--wp--custom--rule--soft); }

/* Die letzte Reihe auffuellen. Bis zum 2026-08-24 gingen fuenfzehn
   Gebiete glatt in fuenf Reihen auf, und diese Regel gab es nicht.
   Seit ein Gebiet fort ist, sind es vierzehn - die letzte Reihe
   traegt zwei Zellen, und an der dritten Stelle fehlte nicht nur
   der Eintrag, sondern auch die Linie darueber. Ein Raster, dessen
   Schlusszeile nach zwei Dritteln abbricht, liest sich wie eine
   Tabelle, der jemand die Fortsetzung weggenommen hat.

   Die letzte Zelle nimmt deshalb den Rest ihrer Reihe. Gefragt
   wird nach dem Rest der Teilung, nicht nach der Zahl vierzehn:
   bei fuenfzehn greift keine der beiden Zeilen, bei dreizehn
   spannt die letzte ueber die vollen drei Stellen. Die Regel
   ueberlebt damit die naechste Aenderung an der Liste, ohne dass
   hier jemand nachzaehlt. */
.rg-liste__cell:last-child:nth-child(3n + 2) { grid-column: span 2; }
.rg-liste__cell:last-child:nth-child(3n + 1) { grid-column: span 3; }

.rg-eintrag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  height: 100%;
  padding: var(--wp--preset--spacing--40);
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: background-color var(--wp--custom--transition--state);
}

/* Die Zeichen tragen den Akzent, nicht die Tinte. Operator-Wunsch
   vom 2026-08-02: die Rechtsgebiete-Zeichen sollen orange stehen.

   Bewusst ueber das Akzent-Token und nicht ueber einen eigenen
   Farbwert: [data-accent] steht auf den Seiten auf "orange", und
   wer den Akzent auf der Stellschrauben-Seite auf Gold oder Gelb
   dreht, muss diese Zeichen mitnehmen. Eine Einzelregel mit
   festem Orange wuerde beim ersten Wechsel auseinanderfallen. */
/* Der Weg ueber color und currentColor statt direkt ueber stroke
   ist kein Umweg, sondern die Reparatur eines gemessenen Fehlers.

   Erst stand hier stroke: var(--accent) mit transition auf stroke.
   Die Farbe war richtig, zog aber beim Wechsel der Akzentfarbe
   nicht nach: das Token aenderte sich, der gemalte Strich blieb
   stehen. Nachgemessen am 2026-08-02 - mit abgeschalteter
   Transition sprang die Farbe sofort um, mit ihr nie.

   Zwei Aenderungen, beide nachgemessen:

   1. currentColor statt stroke direkt. Das ist das Muster, das
      .rg-card__icon im Haus schon benutzt - zwei Wege fuer
      dieselbe Sache waeren einer zu viel.
   2. KEINE Transition. Sie war die eigentliche Ursache: die
      Transition haelt den zuletzt gemalten Wert fest, und ein
      Tokenwechsel am <html>-Element kommt dagegen nicht an.
      Gemessen: mit Transition blieb der Strich auf Orange
      stehen, waehrend das Token schon auf Gelb stand; ohne sie
      springt er sofort mit.

   Der Preis ist eine Ueberblendung von 180 Millisekunden beim
   Zeigen, die auf einer 1,1 Pixel starken Strichzeichnung
   ohnehin niemand sieht. Der Gegenwert ist ein Farbschalter, der
   auf der Stellschrauben-Seite tatsaechlich wirkt. */
.rg-eintrag__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--wp--preset--color--accent);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rg-eintrag__titel {
  font-family: var(--wp--preset--font-family--condensed);
  font-size: var(--wp--preset--font-size--md);
  font-weight: var(--wp--custom--weight--heading);
  line-height: 1.25;
}

/* Der Pfeil ist im Ruhezustand unsichtbar, belegt seinen Platz
   aber immer. Sonst ruckt die Zeile beim Zeigen. */
.rg-eintrag__pfeil {
  font-size: var(--wp--preset--font-size--md);
  line-height: 1;
  color: var(--wp--preset--color--accent-text);
  opacity: 0;
  transition: opacity var(--wp--custom--transition--state),
              transform var(--wp--custom--transition--state);
}

.rg-eintrag:hover,
.rg-eintrag:focus-visible {
  background: color-mix(in srgb, var(--wp--preset--color--ink) 5%, transparent);
}

/* Beim Zeigen dunkelt das Zeichen auf den dunkleren Akzentton ab,
   statt auf die Tinte zu springen. Sonst waere der Wechsel ein
   Farbwechsel und keine Betonung. */
.rg-eintrag:hover .rg-eintrag__icon,
.rg-eintrag:focus-visible .rg-eintrag__icon { color: var(--wp--preset--color--accent-text); }

.rg-eintrag:hover .rg-eintrag__pfeil,
.rg-eintrag:focus-visible .rg-eintrag__pfeil {
  opacity: 1;
  transform: translateX(0.2rem);
}

/* Der Umbruch der Liste und der des Kopfes liegen auf derselben
   Schwelle. Zwei Spalten in der Liste heisst: der Schirm ist schmal
   genug, dass auch der Kopf nicht mehr in zwei Spalten passt. Bei
   768 Pixeln blieben fuer "Rechtsgebiete" neben dem Zeichen rund
   470 Pixel - zu wenig fuer den Schriftgrad der Sektionstitel. */
@media (max-width: 62rem) {
  .rg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-liste__cell:not(:nth-child(3n + 1)) { border-left: 0; }
  .rg-liste__cell:not(:nth-child(2n + 1)) { border-left: var(--wp--custom--rule--soft); }

  /* Das Zeichen wandert unter den Text. */
  .rg-kachel__kopf { grid-template-columns: minmax(0, 1fr); }

  .rg-kachel__hinweis {
    grid-column: 1;
    grid-row: auto;
    justify-content: start;
    margin-top: var(--wp--preset--spacing--40);
  }

  .rg-kachel__wort { text-align: left; }
}

@media (max-width: 44rem) {
  .rg-kachel__kopf { padding: var(--wp--preset--spacing--40); }

  .rg-liste { grid-template-columns: minmax(0, 1fr); }
  .rg-liste__cell:not(:nth-child(2n + 1)) { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rg-kachel__body { animation: none; }
  .rg-eintrag__pfeil { transition: opacity var(--wp--custom--transition--state); }
  .rg-eintrag:hover .rg-eintrag__pfeil { transform: none; }
}

/* ------------------------------------------------------------
   20. Warum wir: die Gruende

   Hier standen bis zum 2026-08-02 zwei Spalten - links die
   Mandantenstimme auf dunkler Flaeche, rechts das Akkordeon mit
   den Gruenden. Die Stimme ist auf Operator-Wunsch entfallen
   ("das ist mir zu maechtig"); ihr Text war ein Muster ohne
   schriftliche Freigabe der zitierten Person.

   Die Regeln der Stimme stehen unveraendert weiter unten in
   diesem Abschnitt. Sie greifen nirgends, solange das Markup
   fehlt, und sind bewusst nicht geloescht: kommt eine
   freigegebene Stimme aus der Kanzlei, ist die Fassung mit
   einem Markup-Block und einer Rasterzeile wieder da.
   ------------------------------------------------------------ */
/* Seit dem 2026-08-02 traegt das Raster nur noch eine Spalte: die
   Mandantenstimme links ist auf Operator-Wunsch entfallen ("das ist
   mir zu maechtig") und hatte ohnehin keine schriftliche Freigabe.

   Die verbliebene Spalte laeuft NICHT ueber die volle Breite. Ein
   Akkordeon, dessen Zeilen ueber 60 Zeichen hinausgehen, verliert
   den Zusammenhang zwischen Titel links und Zeichen rechts - die
   Begrenzung ist Lesbarkeit, keine Zierde.

   Die Regeln der Stimme bleiben unten stehen. Sie sind tot, solange
   ihr Markup fehlt, und sind der Bauplan, falls die Kanzlei eine
   freigegebene Stimme liefert. */
.warum__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--60);
  align-items: start;
  max-width: 52rem;
  margin-inline: auto;
}

/* Die Stimme bleibt stehen, waehrend rechts geblaettert wird.
   Der Abstand nach oben haelt sie unter dem klebenden Kopf. */
/* ------------------------------------------------------------
   Die Mandantenstimme. Operator-Wunsch vom 2026-07-30:
   statt der satten blauen Flaeche das Nordsternhaus aus der
   gezeichneten Bildwelt, stark unscharf im Hintergrund.
   ------------------------------------------------------------
   Der Marineton bleibt als Grundfarbe unter dem Bild liegen und
   kehrt als Schleier darueber wieder. Das ist kein Rest der alten
   Fassung, sondern die Bedingung, unter der weisse Schrift hier
   ueberhaupt stehen darf: die Zeichnung hat grosse weisse Partien,
   und Unschaerfe allein macht Weiss nicht dunkler.

   Die Unschaerfe ist absichtlich so stark, dass niemand das Haus
   "liest". Es soll wiedererkannt werden, nicht betrachtet - der
   Kasten traegt ein Zitat, kein Bild.

   isolation: isolate ist nicht schmueckend. Ohne einen eigenen
   Stapel-Zusammenhang faellt das Kind mit negativem z-index nicht
   hinter den Text, sondern hinter die ganze Sektion und ist weg.
   ------------------------------------------------------------ */
.stimme {
  position: sticky;
  top: 6rem;
  margin: 0;
  padding: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
  isolation: isolate;
  /* Die Unschaerfe zieht die Bildkanten nach innen weich. Ohne
     diesen Schnitt staende an jedem Rand ein heller Saum. */
  overflow: hidden;
}

.stimme::before {
  content: "";
  position: absolute;
  /* Ueber den Rand hinaus, damit die Unschaerfe aus dem Bild
     heraus verlaeuft und nicht an der Kante ausgeht. Der Wert
     liegt bewusst ueber dem Unschaerfe-Radius. */
  inset: -1.5rem;
  z-index: -1;
  /* Zwei Lagen mit eigener Groesse.

     Operator-Wunsch vom 2026-07-30: das Bild soll als Bild zu
     erkennen sein, nicht nur als Stimmung. Deshalb eine leichte
     Unschaerfe statt der frueheren 24 Pixel, und der Schleier
     dunkelt staerker nach unten ab als oben: oben liest man das
     Haus, unten steht die Schrift auf sattem Marineblau.

     Der Ausschnitt bleibt bei 190 Prozent Breite, zentriert auf
     den Tuerbogen - das ganze Haus auf Kastenbreite gestaucht
     wuerde wieder zum Muster zerfallen. */
  background:
    linear-gradient(
      to bottom,
      rgba(0, 48, 91, 0.42),
      rgba(7, 31, 78, 0.88) 78%
    ),
    url("../assets/popart/hauseingang.webp") 50% 62% / 190% auto no-repeat;
  filter: blur(5px);
}

/* Das Anfuehrungszeichen ist Gestaltungselement, kein Satzzeichen.
   Deshalb liegt es im CSS und nicht im Text, und deshalb ist es
   vor Vorlesesoftware verborgen. */
.stimme__text {
  margin: 0;
  quotes: none;
}

.stimme__text::before {
  content: "\201E";
  display: block;
  margin-bottom: calc(var(--wp--preset--spacing--40) * -1);
  font-family: var(--wp--preset--font-family--condensed);
  font-size: 5rem;
  line-height: 1;
  color: var(--wp--preset--color--accent-orange);
}

.stimme__text p {
  max-width: none;
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 300;
  line-height: 1.45;
}

.stimme__quelle {
  margin-top: var(--wp--preset--spacing--40);
  padding-top: var(--wp--preset--spacing--30);
  border-top: var(--wp--custom--rule--width) solid color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
}

.gruende__titel { margin-bottom: var(--wp--preset--spacing--50); }

/* Ein Grund. Getrennt wird ueber eine Linie ueber die volle
   Spaltenbreite, nicht ueber einen Kasten - sonst entsteht wieder
   der Baukasten-Eindruck, den die Rechtsgebiete hatten. */
.grund { border-top: var(--wp--custom--rule--strong); }

.grund:last-of-type { border-bottom: var(--wp--custom--rule--strong); }

.grund__kopf {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  padding-block: var(--wp--preset--spacing--40);
  cursor: pointer;
  list-style: none;
}

.grund__kopf::-webkit-details-marker { display: none; }
.grund__kopf::marker { content: ""; }

.grund__titel {
  flex: 1;
  font-family: var(--wp--preset--font-family--condensed);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--heading);
  line-height: 1.2;
  color: var(--wp--preset--color--ink);
  transition: color var(--wp--custom--transition--state);
}

/* Dasselbe Zeichen wie bei den Rechtsgebieten: ein Kreis mit
   Plus, das beim Oeffnen zum Minus wird. Eine Geste im ganzen
   System, nicht zwei. */
.grund__sign {
  position: relative;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border: var(--wp--custom--rule--width) solid var(--wp--custom--rule--soft-farbe, rgba(0, 48, 91, 0.3));
  border-radius: 50%;
  transition: background-color var(--wp--custom--transition--state);
}

.grund__sign::before,
.grund__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: var(--wp--custom--rule--width);
  background: var(--wp--preset--color--accent-orange);
  transform: translate(-50%, -50%);
  transition: transform var(--wp--custom--transition--state);
}

.grund__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.grund[open] .grund__sign::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }

.grund__kopf:hover .grund__sign { background: var(--wp--preset--color--accent-wash); }

.grund__kopf:hover .grund__titel { color: var(--wp--preset--color--accent-text); }

.grund__text {
  padding-bottom: var(--wp--preset--spacing--40);
  animation: rg-auf var(--wp--custom--transition--slow) both;
}

.grund__text p {
  max-width: 42rem;
  color: var(--wp--preset--color--muted);
}

/* ---------- Dasselbe Muster fuer die Themen eines Rechtsgebiets ----------
   Neu am 2026-09-10 fuer das Arbeitsrecht: sieben Oberpunkte zum
   Aufklappen, Vorbild ist der urspruengliche PJM-Auftritt. Begruendung
   und Quelle stehen im Markup von rechtsgebiet-arbeitsrecht.html.

   Die Klasse .grund traegt das Verhalten, .grund--thema nur die
   Unterschiede: Der Titel steht eine Stufe kleiner, weil hier sieben
   Zeilen untereinander stehen und nicht fuenf, und weil ein
   Themenkatalog leiser auftreten darf als ein Argument. */
.grund--thema .grund__titel {
  font-size: var(--wp--preset--font-size--lg);
}

/* Die Unterpunkte laufen mehrspaltig. Punkt 2 traegt zwoelf Eintraege -
   einspaltig waere das eine Kolonne, die den halben Bildschirm braucht
   und beim Aufklappen alles darunter wegschiebt. columns statt grid,
   weil die Zahl der Eintraege je Punkt zwischen fuenf und zwoelf
   schwankt: der Umbruch soll sich danach richten, nicht nach einer
   festen Spaltenzahl.

   break-inside verhindert, dass ein langer Eintrag ueber die
   Spaltengrenze zerrissen wird. */
.themenliste {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--wp--preset--spacing--60);
}

.themenliste li {
  break-inside: avoid;
  padding-left: var(--wp--preset--spacing--40);
  margin-bottom: var(--wp--preset--spacing--30);
  position: relative;
  color: var(--wp--preset--color--muted);
}

/* Der Strich vor dem Eintrag ist dieselbe Geste wie in ul.list und in
   der Wortmarke: eine kurze Waagerechte im Akzent. */
.themenliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.6rem;
  height: var(--wp--custom--rule--width);
  background: var(--wp--preset--color--accent);
}

@media (max-width: 48rem) {
  .themenliste { columns: 1; }
}

/* Abstand zwischen dem Text und den Aufklapp-Punkten. Der Text steht
   als .prose darueber und bringt seinen eigenen unteren Rand nicht
   mit - .themen setzt ihn. */
.themen {
  margin-top: var(--wp--preset--spacing--60);
}

/* Der Text ueber den Themen laeuft schmaler als der Wrap.

   Gemessen am 2026-09-10 im Browser: ueber die volle Wrap-Breite
   (1152 Pixel bei 17 Pixel Schrift) stehen 136 Zeichen in einer Zeile.
   Lesbar sind 60 bis 80 - darueber verliert das Auge beim Ruecksprung
   die Zeile. Auf der Kanzlei-Seite faellt dasselbe .prose nicht auf,
   dort stehen zwei kurze Absaetze; hier sind es fuenf.

   44rem sind rund 70 Zeichen. Der freie Raum rechts stoert nicht, er
   gibt den sieben Aufklapp-Punkten darunter das Gewicht, das sie in
   dieser Sektion haben sollen.

   Nur hier, nicht global: .prose p { max-width: none } steht seit
   Langem so im Haus und traegt Seiten, auf denen es passt. */
.section .prose--schmal p {
  max-width: 44rem;
}

@media (max-width: 62rem) {
  .warum__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--50);
  }
  /* Nicht "static": der Bildhintergrund ist absolut gesetzt und
     braucht diesen Kasten als Bezug. Auf static bezoege er sich
     auf die naechste positionierte Kachel weiter oben und liefe
     quer ueber die Sektion. */
  .stimme { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  .grund__text { animation: none; }
}

/* ------------------------------------------------------------
   21. Parkplatz unterhalb des Footers - entfallen am 2026-07-30.

   Hier lag die Beitrags-Sektion unterhalb des Footers geparkt,
   bis ueber ihren Platz entschieden war. Die Entscheidung ist
   gefallen: sie faellt weg. Die eigene Seite (Aktuelles) und die
   Verweise aus Navigation und Footer bleiben, der doppelte
   Anriss auf der Startseite nicht.

   Die Klasse ist ersatzlos gestrichen statt ungenutzt liegen zu
   bleiben - eine Regel ohne Markup ist eine Einladung, sie
   versehentlich wiederzubeleben.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   22. Hero-Text unten links
   Ueberschreibt die zentrierte Anordnung aus theme-a.css. Steht
   hier und nicht dort, weil theme-a.css aus der Hero-Session
   kommt und jederzeit neu gezogen wird - diese Datei traegt die
   Struktur-Entscheidungen und bleibt.

   Hoehere Spezifitaet noetig: layout.css wird VOR theme-a.css
   geladen, deshalb :root davor. Sonst gewinnt die zentrierte
   Fassung.
   ------------------------------------------------------------ */
:root[data-version="a"] .hero__inner,
:root[data-version="b"] .hero__inner {
  align-content: end;
  justify-items: start;
  text-align: left;
  /* Unten weniger Luft als in der zentrierten Fassung, sonst
     schwebt die Zeile ueber dem unteren Rand statt darauf zu
     stehen. Der Scroll-Hinweis bleibt darunter frei. */
  padding-block:
    var(--wp--preset--spacing--70)
    calc(var(--wp--preset--spacing--70) + var(--wp--custom--vh) * 6);
}

:root[data-version="a"] .hero__claim,
:root[data-version="b"] .hero__claim {
  margin-inline: 0;
  max-width: 48rem;
}

:root[data-version="a"] .hero .eyebrow::after { margin-inline: 0; }

:root[data-version="a"] .hero .lead,
:root[data-version="b"] .hero .lead { margin-inline: 0; }

/* ------------------------------------------------------------
   23. Fusion als lange Kachel ueber Aktuelles

   Der Aufmacher der Sektion Aktuelles. Bild links, Text rechts,
   ein Koerper ueber die volle Satzbreite - dieselbe Bauweise wie
   die kleinen Kacheln darunter, nur quer statt hoch. Damit ist
   erkennbar, dass beides Meldungen sind, und trotzdem, welche
   die wichtigere ist.

   Kein Farbfeld hinter dem Text: die Pop-Art-Bilder bringen Blau
   und Orange schon mit, eine zweite Farbe daneben waere Laerm.
   Der Rahmen ist derselbe wie an den Meldungen.

   Die Kachel ist bewusst KEIN Link. Sie enthaelt ihren Text
   vollstaendig; ein Verweis auf sich selbst waere sinnlos, und ein
   Kasten, der ganz klickbar ist, aber nirgendwohin fuehrt, ist
   eine Falle. Verlinkt ist nur die Zeile zum Team.
   ------------------------------------------------------------ */
/* Ein Drittel statt 42 Prozent: der Aufmacher soll sich als breite,
   flache Zeile lesen, nicht als Kasten ueber die halbe Bildschirm-
   hoehe. Gemessen bei 1280 war nicht das Bild der Hoehentreiber,
   sondern der Textkasten (625 von 635 px). Deshalb greifen hier
   drei Dinge zusammen: schmaleres Bild, kleinere Polsterung und
   ein weiterer Deckel fuer die Laufzeile - eine Massnahme allein
   haette nichts gebracht, solange 44ch die Zeile kurz haelt. */
.fusion-kachel {
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr);
  margin-bottom: var(--wp--preset--spacing--40);
  border: var(--wp--custom--rule--soft);
  background: var(--wp--preset--color--base);
}

.fusion-kachel__figur {
  margin: 0;
  /* Das Bild fuellt seine Spalte in voller Hoehe des Kastens. Ein
     festes Seitenverhaeltnis wie bei den kleinen Kacheln wuerde
     hier eine Luecke lassen, weil der Text die Hoehe bestimmt. */
  position: relative;
  min-height: 17rem;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
}

.fusion-kachel__figur img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fusion-kachel__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--50);
}

/* Rubrik und Datum in einer Zeile, getrennt durch einen senk-
   rechten Strich aus einer Rahmenkante. Kein Zeichen, damit
   nichts an der Schrift haengt. */
.fusion-kachel__meta {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  margin: 0;
  max-width: none;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-text);
}

.fusion-kachel__datum {
  padding-left: var(--wp--preset--spacing--30);
  border-left: var(--wp--custom--rule--strong);
  color: var(--wp--preset--color--muted);
}

.fusion-kachel__titel {
  margin: 0;
  font-family: var(--wp--preset--font-family--condensed);
  font-size: var(--wp--preset--font-size--xxl);
  font-weight: var(--wp--custom--weight--display);
  letter-spacing: var(--wp--custom--tracking--display);
  line-height: 1.1;
  color: var(--wp--preset--color--ink);
}

/* 56ch statt 44ch. Die Spalte ist jetzt breiter, und der engere
   Deckel haette die gewonnene Breite verschenkt: dieselbe Zeilen-
   zahl auf mehr Flaeche. 56 Zeichen bleiben im lesbaren Korridor
   (45 bis 75) und sparen gegenueber 44ch eine ganze Zeile. */
.fusion-kachel__lauf {
  margin: 0;
  max-width: 56ch;
  color: var(--wp--preset--color--muted);
}

.fusion-kachel__weiter {
  margin: 0;
  margin-top: var(--wp--preset--spacing--20);
  max-width: none;
}

/* Unter der Kachel laufen nur noch zwei Meldungen. Sie behalten
   die Breite der Dreierreihe nicht - zwei Kacheln in Spalten fuer
   drei saehen aus wie eine fehlende dritte.

   Sie stehen quer, Bild links wie beim Aufmacher darueber. Das
   hat zwei Gruende. Erstens die Hoehe: ein Bild ueber dem Text
   erzwingt bei halber Seitenbreite ein 316 px hohes Motiv, und
   die Kachel wird 445 px hoch - hoeher als der Aufmacher nach
   dem Umbau. Quer ist die Hoehe frei waehlbar. Zweitens die
   Ordnung: Aufmacher und Meldungen teilen sich dieselbe senk-
   rechte Kante zwischen Bild und Text. Eine durchgehende Achse
   durch die ganze Sektion ist der Unterschied zwischen einer
   gesetzten Seite und einem Kachelraster.

   Der Modifier sitzt an .news-card--quer und nicht an der
   Sektion, weil dieselbe Kachel auf anderen Seiten hochkant in
   Dreierreihen steht. */
/* Das Raster richtet sich nach der Karte, nicht die Karte nach dem
   Raster. Gemessen wurde beides in der falschen Reihenfolge: mit
   festen zwei Spalten und einem Umbruch an der Fensterbreite stand
   die Karte bei 600 px hochkant, obwohl sie 552 px breit war, und
   bei 768 px quer, obwohl nur 341 px blieben. Der Umbruch hing am
   Fenster, entscheidend ist aber die Breite der Karte.

   auto-fit mit einer Mindestbreite dreht das um: zwei Spalten
   entstehen erst, wenn beide breit genug fuer die Querform sind,
   sonst laeuft eine Spalte ueber die volle Breite - und die ist
   fuer quer immer breit genug. Damit bleibt genau ein Fall fuer
   hochkant uebrig, das Telefon, und der haengt sauber am Fenster. */
.aktuelles__meldungen {
  margin-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
}

/* ------------------------------------------------------------
   Die Bahn in Aktuelles
   ------------------------------------------------------------
   Seit dem 2026-07-30 laufen die Meldungen auf der Startseite als
   Reihe, durch die man blaettert, statt als zwei Kacheln
   nebeneinander (Operator-Wunsch). Gebaut aus dem, was der
   Browser von sich aus kann: ein Kasten, der waagerecht
   ueberlaeuft, mit Einrast-Punkten. Damit wischt der Daumen ohne
   eine Zeile Skript, und die Tastatur faehrt mit den Pfeiltasten -
   beides waere bei einem nachgebauten Karussell Handarbeit und
   meistens kaputt.

   Die Pfeile sind Zugabe, kein Fundament: js/aktuelles.js setzt
   sie ein, wenn es laeuft. Ohne Skript bleibt die Bahn schiebbar,
   nur ohne Knoepfe.

   Kein Sprung von allein. Fuer den Hero war das ausdruecklich
   abgelehnt, und was dort gilt, gilt fuer eine Liste von
   Fachbeitraegen erst recht.
   ------------------------------------------------------------ */
.aktuelles__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
}

.aktuelles__bahn {
  display: grid;
  grid-auto-flow: column;
  /* Drei Karten auf dem Schreibtisch, und die vierte schaut ein
     Stueck herein. Das ist der Zweck des angeschnittenen Rests:
     er sagt "hier geht es weiter", noch bevor jemand einen Pfeil
     gesehen hat. */
  grid-auto-columns: calc((100% - 2 * var(--wp--preset--spacing--40)) / 3.35);
  gap: var(--wp--preset--spacing--40);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Platz fuer den Fokus-Rahmen der Karten; ohne ihn schneidet der
     ueberlaufende Kasten ihn an drei Seiten ab. Der negative
     Aussenabstand holt die Bahn wieder auf den Satzspiegel.

     scroll-padding gehoert zwingend dazu: ohne diese Zeile rechnet
     der Einrast-Punkt die Polsterung nicht mit, die Bahn rastet am
     Anfang auf Position 5,6 statt 0 ein - und der Zurueck-Pfeil
     bleibt dort aktiv, obwohl es nicht zurueckgeht. Gemessen, nicht
     vermutet. */
  padding: 0.35rem 0.35rem var(--wp--preset--spacing--30);
  scroll-padding-inline: 0.35rem;
  margin-inline: -0.35rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.aktuelles__bahn::-webkit-scrollbar { display: none; }

.aktuelles__karte { scroll-snap-align: start; }

/* Die letzte Karte rastet rechts ein, nicht links. Ohne diese
   Zeile gibt es fuer sie keinen gueltigen Einrast-Punkt am Ende
   der Bahn: die Bahn faehrt dann nur bis dorthin, wo die letzte
   Karte LINKS anliegt, und laesst rechts einen Rest stehen, den
   man nicht erreicht - gemessen 239 von 1653 Pixeln. */
.aktuelles__karte:last-child { scroll-snap-align: end; }

/* Der Kasten ist mit der Tastatur erreichbar, weil er scrollbar
   ist. Sein Fokus muss deshalb auch zu sehen sein. */
.aktuelles__bahn:focus-visible {
  outline: var(--wp--custom--rule--width) solid var(--wp--preset--color--accent);
  outline-offset: 0.25rem;
}

.aktuelles__steuer {
  display: flex;
  gap: 0.5rem;
  flex: none;
}

.aktuelles__pfeil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: var(--wp--custom--rule--width) solid color-mix(in srgb, var(--wp--preset--color--ink) 22%, transparent);
  border-radius: 50%;
  background: none;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  transition:
    background-color var(--wp--custom--transition--state),
    border-color var(--wp--custom--transition--state),
    color var(--wp--custom--transition--state),
    opacity var(--wp--custom--transition--state);
}

.aktuelles__pfeil svg { width: 1.1rem; height: 1.1rem; }

.aktuelles__pfeil:hover:not(:disabled),
.aktuelles__pfeil:focus-visible {
  background: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
}

/* Am Ende der Bahn bleibt der Pfeil stehen, statt zu verschwinden.
   Ein Knopf, der sich in Luft aufloest, laesst den zweiten
   springen - und dann trifft man ihn nicht mehr. */
.aktuelles__pfeil:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 62rem) {
  .aktuelles__bahn {
    grid-auto-columns: calc((100% - var(--wp--preset--spacing--40)) / 2.25);
  }
}

@media (max-width: 40rem) {
  .aktuelles__bahn { grid-auto-columns: 78%; }
  /* Auf dem Telefon wischt der Daumen. Zwei kleine Knoepfe daneben
     waeren dort das schlechtere Werkzeug und kosten nur Platz. */
  .aktuelles__steuer { display: none; }
}

.news-card--quer {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  align-items: stretch;
}

.news-card--quer .news-card__figure {
  aspect-ratio: auto;
  height: 100%;
  min-height: 10rem;
}

.news-card--quer .news-card__body { justify-content: center; }

@media (max-width: 30rem) {
  /* Erst hier ist die Karte selbst zu schmal fuer zwei Spalten
     im Inneren: neben dem Bild bliebe keine Zeile, die eine
     Schlagzeile traegt. */
  .aktuelles__meldungen { grid-template-columns: minmax(0, 1fr); }

  .news-card--quer { grid-template-columns: minmax(0, 1fr); }

  .news-card--quer .news-card__figure {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }
}

/* Gestapelt wird erst bei 44rem, nicht schon bei 62rem. Der
   frueher Umbruch war der teuerste Posten auf mittleren Breiten:
   bei 900 px stand das Bild im Verhaeltnis 3:2 ueber die volle
   Breite, allein 560 px hoch, und die Kachel wuchs auf 902 px -
   mehr als doppelt so hoch wie am Desktop. Ein Drittel Bild
   neben dem Text traegt auch bei 768 px noch; erst darunter
   bleibt fuer die Laufzeile zu wenig uebrig.

   Beim Stapeln dann 16:9 statt 3:2. Ein Aufmacher, der als
   flache Zeile gedacht ist, darf auf dem Telefon nicht als
   halbseitiges Bild mit Bildunterschrift ankommen. */
@media (max-width: 44rem) {
  .fusion-kachel { grid-template-columns: minmax(0, 1fr); }

  .fusion-kachel__figur {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .fusion-kachel__text { padding: var(--wp--preset--spacing--40); }
}

@media (max-width: 44rem) {
  /* Nebeneinander bliebe fuer beide Angaben zu wenig Platz. */
  .fusion-kachel__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--20);
  }

  .fusion-kachel__datum {
    padding-left: 0;
    border-left: 0;
  }
}

/* ------------------------------------------------------------
   23. Rechtsgebiete - entfallen am 2026-08-03.

   Hier standen die zweite Fassung der Rechtsgebiete-Sektion (das
   Register mit Ziffern, schmaler Schrift und zwei Spalten) und der
   Umschalter davor. Operator-Entscheid: die Kachel mit Raster ist
   gewaehlt, beides faellt ersatzlos weg - Markup wie Regeln.

   Warum das hier als Luecke steht und nicht stillschweigend: die
   Nummerierung der Abschnitte ist im ganzen Blatt verwiesen. Wer
   23b sucht, soll nicht raten muessen, wo 23 geblieben ist.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   23b. Der Haus-Text, eine Fassung

   Ergaenzt am 2026-08-02, eingedampft am 2026-08-03.

   Der Vorgaengertext nannte "Hamburger Unternehmen und Familien" -
   regional zu eng und mit einer Mandantengruppe im Schaufenster,
   die dort nicht stehen soll. Daraufhin standen hier zwei
   Fassungen nebeneinander, umschaltbar ueber zwei versteckte
   Radiofelder (#introwahl-1 und -2) nach dem Muster von rgwahl
   und wandwahl.

   Der Operator hat sich fuer Fassung 1 entschieden. Schalter und
   zweite Fassung sind aus dem Markup entfernt, und mit ihnen die
   Regeln, die es hier gab: die beiden :checked-Paare fuer die
   Marken, .introwahl fuer den Abstand des Schalters und
   .intro__fassung als abstandsloser Traeger (display: contents).

   Sie sind ersatzlos gestrichen und nicht auskommentiert: die
   Mechanik steht unveraendert zweimal in dieser Datei - an der
   Anwaltswand (18b) und an den Rechtsgebieten (23). Wer die Wahl
   zurueckholen will, hat dort die Vorlage und braucht diese tote
   Kopie nicht.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   23c. Angaben an den Anwaltskacheln, abschaltbar

   Operator-Entscheid vom 2026-08-02: fuer die Vorstellung am
   Dienstag tragen die Kacheln nur Foto und Name. Grund ist nicht
   Gestaltung, sondern Datenlage - bei manchen Personen steht ein
   Rechtsgebiet, bei anderen mehrere, bei zweien gar keins. Halb
   befuellt wirkt unfertig. Dirk hatte das im Call selbst
   angeboten: "Wenn es zu umfangreich wird, dann wuerde ich das
   eher weglassen und nur die Fotos nehmen."

   Bewusst NICHT geloescht, sondern geschaltet. Das Markup bleibt
   vollstaendig stehen; sobald die Kanzlei die fehlenden
   Zuordnungen liefert, holt EIN Klick auf der Stellschrauben-
   Seite die Angaben zurueck - ohne Neubau.

   Der Standard ist der Dienstags-Stand: ohne Attribut ist die
   Zeile UNTER DEM NAMEN weg. [data-kachel-detail="an"] zeigt sie
   wieder.

   KORREKTUR vom 2026-08-02, nachtraeglich: Die Regel griff zuerst
   auch auf .tile__line und .karte__zeile - also auf die Zeilen IM
   UEBERZUG, der beim Ueberfahren erscheint. Damit war der Ueberzug
   bis auf "Profil ansehen" leer, und genau die Angabe fehlte, die
   dort hingehoert. Das war nicht gewollt.

   Die Trennung, die jetzt gilt und die der Operator so entschieden
   hat: UNTER DEM NAMEN steht nichts, weil einige Personen viele
   Gebiete fuehren und eine Zeile das nicht traegt. IM UEBERZUG
   steht alles, weil dort Platz ist und weil derjenige, der die
   Maus anhaelt, genau diese Auskunft sucht.

   Der Schalter regelt deshalb nur noch die Zeile unter dem Namen.
   Der Ueberzug ist von ihm unabhaengig und immer vollstaendig.

   Was die Regel NICHT anfasst: data-gebiet an den Feldern. Die
   Filterleiste auf anwaelte.html liest ihre Zuordnung von dort
   und arbeitet unveraendert weiter.

   Die Regel fuer .karte__gebiet steht hier und nicht in
   unterseiten.css: sie gehoert sachlich zu dieser einen
   Entscheidung, und ueber die hoehere Spezifitaet greift sie auch
   gegen die spaeter geladene Datei.
   ------------------------------------------------------------ */
:root:not([data-kachel-detail="an"]) .tile__kurz,
:root:not([data-kachel-detail="an"]) .karte__gebiet {
  display: none;
}


/* ------------------------------------------------------------
   25. Logo im Hero, wandernd in den Kopf

   Zwei Fassungen liegen im Markup, geschaltet ueber
   data-hero-marke am Wurzelelement: das Logo (Vorgabe) und der
   bisherige Claim. Der Claim bleibt, weil er laut Call "eine gute
   Grundlage fuer weitere Ueberlegungen" ist - nur nicht fuer den
   Einstieg, den Martin intern zeigen will.

   Die Fahrt bewegt ausschliesslich transform, nie Breite oder
   Position im Fluss. Das Logo liegt dafuer bildschirmfest und
   wird zwischen zwei gemessenen Punkten interpoliert; die Punkte
   liefert js/logo-fahrt.js als blanke Zahlen, die Einheit steht
   hier. Ohne das Skript fehlt data-logo-fahrt, und dann bleibt
   alles im Fluss stehen - grosses Logo im Hero, Wortmarke im Kopf,
   wie auf jeder Unterseite.

   Der Kopf steht bereits (position: sticky, Abschnitt 4). Damit
   ist Martins offene Frage zum stehenden Kopf nicht neu zu
   entscheiden, sondern nur noch zu zeigen.
   ------------------------------------------------------------ */
/* Gemessen am 2026-09-16 bei 1280 x 800 auf der Startseite, weil Kai
   Surmann schrieb, man werde vom Logo erschlagen:

     Scroll     Kopfmarke            Hero-Logo
        0 px    20 / 64 / 205 px     554 / 64 / 486 px
      400 px    20 / 64 / 205 px     150 / 64 / 273 px
      700 px    20 / 64 / 205 px      20 / 64 / 205 px

   Dieselbe Datei, dieselbe linke Kante, ueber die erste Bildschirmhoehe
   beide zugleich sichtbar; am Ende liegen sie exakt uebereinander.

   Kurzzeitig stand hier eine Regel, die die Kopfmarke ausblendete,
   solange das Hero-Logo noch unterwegs ist. Sie ist am selben Tag wieder
   entfernt worden - Operator-Entscheid: Die Marke in der Navigationsleiste
   bleibt unter allen Umstaenden sichtbar. Die Doppelung auf der ersten
   Bildschirmhoehe wird dafuer in Kauf genommen.

   Entschaerft ist Kais Einwand trotzdem: Die Wortmarke im Intro direkt
   darunter ist entfallen (siehe index.html), damit sind es fuenf
   Auftritte statt sechs.

   Falls die Runde spaeter doch nur eine Marke auf dem ersten Bildschirm
   will, ist der Weg ohne neue Technik da: data-hero-marke="claim" am
   Wurzelelement zeigt im Hero den Anspruch statt des Logos. Die Fahrt
   entfaellt dann. */
:root[data-hero-marke="claim"] .hero__logo { display: none; }
:root:not([data-hero-marke="claim"]) .hero__spruch { display: none; }

/* Haelt den Platz, sobald das Logo bildschirmfest liegt - und zwar
   in BEIDE Richtungen. Die Hoehe allein genuegt nicht: der Traeger
   hinter dem Text ist ein Pseudo-Element von .hero__claim und
   bemisst sich ueber inset an dessen Kasten. Steht dort nichts
   mehr im Fluss, wird der Kasten null Pixel breit, der Traeger
   verschwindet, und in Fassung F liegt das marineblaue Logo direkt
   auf der Zeichnung - gemessen unlesbar, Kontrast um 1,1.

   Der Teiler ist das Seitenverhaeltnis der Bilddatei - welcher Wert
   gerade gilt, steht unten an der Zeile, die ihn traegt. */
.hero__marke {
  margin: 0;
  width: var(--wp--custom--logo--breite);
  /* Das Seitenverhaeltnis der Logodatei. Seit dem 2026-09-10 traegt sie
     1853 zu 361, das sind 5.133; davor 1838 zu 349 (5.266) und davor
     5.271. Der Wert haelt den Platz frei, bevor das Bild da ist - er
     MUSS zur Datei passen, sonst springt der Hero beim Laden.

     Bei jedem Logotausch mitziehen. Die Datei kommt aus dem
     Grafikprogramm der Kanzlei und bringt ihren eigenen Zuschnitt mit;
     die orange Fassung vom 2026-09-10 lag mit 2000 zu 600 und rundum
     transparenter Luft vor und ist auf den sichtbaren Kasten
     beschnitten worden. */
  min-height: calc(var(--wp--custom--logo--breite) / 5.133);
}

:root[data-hero-marke="claim"] .hero__marke {
  width: auto;
  min-height: 0;
}

.hero__logo {
  display: block;
  width: var(--wp--custom--logo--breite);
  height: auto;
}

.hero__logo-link {
  display: block;
  text-decoration: none;
  position: relative;
}

/* Das Bild steht ueber dem Kasten. Bewusst so herum und nicht
   ueber ein negatives z-index am Kasten: der Link erzeugt keinen
   eigenen Stapel-Zusammenhang, ein Kind mit z-index -1 rutschte
   deshalb nicht hinter das Logo, sondern hinter den ganzen Hero
   und waere vom Foto verdeckt. */
.hero__logo { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   Der weisse Kasten hinter dem Hero-Logo.
   ------------------------------------------------------------
   Operator-Wunsch vom 2026-07-30: das freigestellte Logo bekommt
   eine eckige weisse Flaeche, die von links in den Hero
   hereinragt, mit reichlich Abstand rundum.

   Er laeuft nach links ueber den Satzspiegel hinaus bis aus dem
   Bild - deshalb hat er dort keine sichtbare Kante und wirkt wie
   ein eingeschobenes Blatt, nicht wie ein Kasten, den jemand
   mittig gesetzt hat. Rechts, oben und unten hat er eine Kante,
   und die ist scharf: Rundungen wurden im Rundschreiben
   ausdruecklich kritisiert (K7).

   Nur dort, wo das Logo auf einem Foto steht. In der geteilten
   Fassung liegt es auf Weiss neben dem Bild, ein weisser Kasten
   waere dort unsichtbar und wuerde nach links ueber das Foto
   ragen.

   Geaendert am 2026-07-30 (Operator-Wunsch): kein Deckweiss mehr,
   sondern Milchglas. Das Blatt liegt jetzt IM Bild statt darauf -
   man sieht die Treppe hindurch, und der Kasten hoert auf, ein
   Fremdkoerper zu sein.

   Zwei Schichten machen das: die Unschaerfe nimmt dem Motiv unter
   dem Logo die Struktur, die leichte Aufhellung hebt dunkle
   Partien an, und erst darauf liegt das halbdurchlaessige Weiss.
   Die Aufhellung ist der Grund, warum 55 Prozent Deckung reichen -
   ohne sie muesste es deutlich mehr sein, und dann waere es
   wieder ein weisser Kasten.

   Gerechnet, nicht geschaetzt: das Marineblau der Wortmarke liegt
   bei einer relativen Helligkeit von 0,029. Ueber der hellsten
   Partie der Treppe steht es damit bei rund 12:1, ueber der
   dunkelsten Wand im Bild noch bei rund 9:1. Wer die Deckung
   senkt, muss beides neu rechnen - die Untergrenze ist 4,5:1.
   ------------------------------------------------------------ */
:root[data-version="a"]:not([data-hero-form="geteilt"]) .hero__logo-link::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--wp--preset--spacing--50));
  bottom: calc(-1 * var(--wp--preset--spacing--50));
  right: calc(-1 * var(--wp--preset--spacing--60));
  /* Weit genug, um in jeder Fassung und jeder Fenstergroesse aus
     dem Bild zu laufen. Nach links entsteht dadurch kein
     waagerechter Ueberlauf - nachgemessen. */
  left: -100vw;
  background: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
  backdrop-filter: blur(18px) brightness(1.16) saturate(0.82);
  -webkit-backdrop-filter: blur(18px) brightness(1.16) saturate(0.82);
}

/* Wo das Logo dem Spruch weicht, hat das Blatt nichts zu tragen.
   Ohne diese Zeile bliebe ein leerer Milchglas-Streifen stehen:
   der Link behaelt seinen Platz, nur sein Bild ist fort. */
:root[data-hero-marke="claim"] .hero__logo-link::before { display: none; }

/* Ohne Unterstuetzung fuer backdrop-filter fehlt die Aufhellung.
   Dann traegt allein das Weiss und muss dichter stehen - sichtbar
   weniger durchlaessig, aber immer noch kein Deckweiss. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-version="a"]:not([data-hero-form="geteilt"]) .hero__logo-link::before {
    background: color-mix(in srgb, var(--wp--preset--color--base) 84%, transparent);
  }
}

/* Der Kasten gehoert zum Hero, nicht zum Kopf. Er loest sich
   deshalb gleich zu Beginn der Fahrt auf, waehrend das Logo
   weiterfaehrt - es hebt sich von seinem Blatt ab und zieht nach
   oben. Wuerde er mitfahren, schrumpfte eine weisse Flaeche in
   die Navigationsleiste hinein.

   Gebunden an data-logo-fahrt, nicht an den Fortschrittswert
   allein: wo nicht gefahren wird (schmale Geraete, reduzierte
   Bewegung), steht der Wert auf 1, und der Kasten waere sonst
   genau dort verschwunden, wo er gebraucht wird. */
:root[data-logo-fahrt="an"] .hero__logo-link::before {
  opacity: clamp(0, calc((0.25 - var(--logo-fahrt, 0)) * 4), 1);
}

/* Gefahren wird nur, wenn das Skript gemessen hat. Der Ursprung
   liegt oben links, damit Verschiebung und Massstab denselben
   Bezugspunkt haben und sich nicht gegenseitig verrechnen.

   Gefahren wird der LINK, nicht das Bild darin: am Ende der Fahrt
   ist das Logo der Weg zurueck auf die Startseite, und ein Bild
   ohne Link waere an dieser Stelle eine tote Flaeche. */
:root[data-logo-fahrt="an"] .hero__logo-link {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 45;
  transform-origin: 0 0;
  transform:
    translate(
      calc((var(--logo-x0) + (var(--logo-x1) - var(--logo-x0)) * var(--logo-fahrt, 0)) * 1px),
      calc((var(--logo-y0) + (var(--logo-y1) - var(--logo-y0)) * var(--logo-fahrt, 0)) * 1px)
    )
    scale(calc(1 + (var(--logo-skala) - 1) * var(--logo-fahrt, 0)));
}

/* Die Uebergabe an den Kopf. Geaendert am 2026-07-30.

   Vorher stand hier das Gegenteil: die Wortmarke im Kopf war
   waehrend der ganzen Fahrt unsichtbar, und das fahrende Logo
   blieb am Ende selbst oben stehen. Der Grund dafuer war, dass
   der Kopf ueber dem Hero absolut lag und wegscrollte - haette
   das Logo dort uebergeben, waere oben links keine Marke mehr
   gewesen.

   Dieser Grund ist weg: der Kopf klebt jetzt ueberall. Also gilt
   der Wunsch aus dem Call unveraendert - das Logo steht von der
   ersten Sekunde an oben links UND gross im Hero, und die Fahrt
   geht am Ende in das Kopf-Logo ueber.

   Der Uebergang ist kein Tausch, sondern ein Aufgehen: das
   fahrende Logo landet auf den Pixel genau auf dem Kopf-Logo
   (beide Punkte sind gemessen, nicht geschaetzt) und loest sich
   auf den letzten acht Prozent der Strecke auf. Was bleibt, ist
   dasselbe Bild an seinem Platz. Ohne dieses Ausblenden lae-
   gen am Ende zwei deckungsgleiche Bilder uebereinander und die
   Marke wirkte um eine Spur zu fett. */
:root[data-logo-fahrt="an"] .hero__logo-link {
  opacity: clamp(0, calc((1 - var(--logo-fahrt, 0)) * 12), 1);
}

/* Wo nicht gefahren wird, bleibt das Logo trotzdem stehen - gross
   im Hero, an seinem Platz im Fluss. Das gilt fuer zwei Faelle:
   ausgeschaltete Bewegung und schmale Geraete. Beide regelt das
   Skript, indem es data-logo-fahrt gar nicht erst setzt.

   Der frueher hier gesetzte Rueckfall auf den Claim war falsch:
   Martin will die Marke im Einstieg sehen, und das gilt auf dem
   Telefon genauso wie am Schreibtisch. Der Claim ist die Fassung
   fuer den Vergleich, nicht der Ersatz fuer schmale Fenster. */
@media (max-width: 44rem) {
  /* Auf dem Telefon nimmt das Logo die Breite, die die Zeichnung
     uebrig laesst; die Untergrenze im Token traegt hier. */
  .hero__logo { width: min(var(--wp--custom--logo--breite), 100%); }
  .hero__marke { width: min(var(--wp--custom--logo--breite), 100%); }
}

/* ------------------------------------------------------------
   26. Hero-Video in der Fassung E (vor der Neuordnung D)

   Martin hat die Scroll-Fahrt durchs Treppenhaus in ihrer alten
   Form abgelehnt und war fuer dasselbe Material als Video offen.
   Operator-Entscheid vom 2026-07-29: es laeuft von allein. Die
   zweite Video-Fassung (Flug zur blauen Stunde, alt E) ist am
   2026-07-30 gestrichen; ihre Regeln sind mit ihr gegangen.

   Damit hebt diese Sektion Abwaegung 17 fuer E auf. Die
   Absicherungen bleiben und sind nicht verhandelbar: kein Ton,
   keine Schleife, ein Standbild als Poster, und bei reduzierter
   Bewegung laeuft gar nichts.

   Der Kasten liegt wie die Standbilder: deckend eingepasst ueber
   die volle Flaeche, damit der Wechsel zwischen den Fassungen
   keinen Sprung im Layout erzeugt.
   ------------------------------------------------------------ */
.hero__video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Dieselbe Behandlung wie die Fotos: leicht entsaettigt und mit
     dem Schleier der Fassung, sonst steht ein Video farbig neben
     einem gedaempften Standbild. */
  filter: var(--wp--custom--image--filter);
}

:root[data-hero-bewegung="video-fahrt"] .hero__video[data-bewegung="video-fahrt"] {
  display: block;
}

/* Solange ein Video laeuft, tritt das Standbild zurueck. */
:root[data-hero-bewegung="video-fahrt"] .hero__figure img[data-motiv] { display: none; }

/* Und die Flaeche behaelt ihre Breite. Ohne diese Zeile war
   Fassung E leer: das Video liegt absolut und haelt keinen Platz,
   die Standbilder sind ausgeblendet - in Version A faengt das die
   feste Hero-Hoehe auf, in Version B bemisst sich die Flaeche am
   Inhalt und fiel auf null Pixel Breite zusammen. Derselbe Fehler
   wie beim Traeger hinter dem Hero-Text: wer den Inhalt aus dem
   Fluss nimmt, muss den Platz eigens halten. */
:root[data-hero-bewegung="video-fahrt"] .hero__figure {
  width: 100%;
  aspect-ratio: 16 / 9;
}

@media (prefers-reduced-motion: reduce) {
  /* Kein selbstlaufendes Bild. Das Video bleibt im Markup und
     zeigt sein Poster; abgespielt wird es nicht, dafuer sorgt
     js/hero-video.js. Hier steht nur, dass das Standbild wieder
     die Flaeche uebernimmt, falls das Video gar nicht erst laedt. */
  :root[data-hero-bewegung="video-fahrt"] .hero__figure img[data-motiv="aufblick"] { display: block; }

  .hero__video { display: none !important; }
}

/* ------------------------------------------------------------
   27. Logo im Kopf und der Hero darunter

   Das Logo sitzt dauerhaft oben links und ist der Weg zurueck auf
   die Startseite - auf jeder Seite, in jeder Scroll-Position. Der
   typografische Nachbau, der hier stand, ist damit ueberfluessig;
   er lebt nur noch im Fussbereich weiter, wo er Text ist und kein
   Bild braucht.

   Fuer die Fahrt aus dem Hero hat der Wechsel einen Nebeneffekt,
   der mehr wert ist als der Aufwand: Start und Ziel zeigen jetzt
   dieselbe Datei. Das Ankommen ist deshalb kein Tausch zweier
   aehnlicher Marken mehr, sondern dasselbe Bild an einem anderen
   Ort.
   ------------------------------------------------------------ */
.wordmark__logo {
  display: block;
  width: clamp(9.5rem, 16vw, 13rem);
  height: auto;
}

/* ------------------------------------------------------------
   28. Der Einstieg: die Marke tritt auf, dann wird sie zum Blatt

   Beim ersten Aufruf der Startseite liegt unter dem Kopf eine
   Glasflaeche ueber dem ganzen Hero. Man sieht die Treppe stark
   defokussiert dahinter. Darauf steht einmal gross und mittig die
   Wortmarke, haelt kurz und geht wieder. Erst dann schliesst sich
   die Flaeche wie eine Blende, bis sie genau das Blatt ist, auf
   dem die Wortmarke im Hero ohnehin sitzt - und loest sich auf.

   Zwei Akte, eine Geste: die Marke zeigt sich frei im Raum und
   nimmt danach ihren Platz im Satzspiegel ein. Deshalb ist der
   Auftakt kein Vorspann, den man wegdruecken will - er ist die
   Begruendung dafuer, warum das Blatt am Ende dort liegt.

   WAS: dasselbe Material, das der Entwurf schon zweimal hat.
   Der Kopf steht auf Weiss 72 Prozent mit blur 20, das Blatt auf
   Weiss 55 Prozent mit blur 18, Aufhellung 1,16 und leicht
   herausgenommener Saettigung. Hier steht dieselbe Rezeptur, nur
   weiter aufgedreht: Weiss 58 Prozent, blur 20 bis 48 nach
   Fenstergroesse.

   Die Zahlen sind angesehen und nicht gesetzt, und sie sind seit
   dem ersten Bau zweimal gewandert. Erster Versuch: Weiss 88 mit
   Aufhellung 1,16, also die Deckung des Kopfes plus die
   Aufhellung des Blattes. Nachweislich falsch - das Treppenhaus
   ist ohnehin ein helles Motiv, die Aufhellung schob es an die
   Decke, uebrig blieb ein weisser Kasten ohne jede Zeichnung.

   Zweiter Stand: Weiss 72, blur 32. Damit ahnte man die Spirale.
   Fuer die Blende allein war das richtig; sobald die Marke davor
   steht, ist es zu milchig. Eine Marke braucht einen Grund, auf
   dem etwas ist - sonst schwebt sie auf Papier.

   Jetzt: Weiss 58, blur bis 48. Die Deckung tritt zurueck, die
   Unschaerfe macht die Arbeit. Man sieht Windungen, Gelaenderzug
   und den warmen Schein der Kuppel, aber keine Stufenkante und
   keinen Buchstaben. Genau das ist gemeint mit ahnen statt lesen -
   und es ist der Untergrund, auf dem eine Wortmarke steht,
   statt zu schweben.

   Nebenwirkung, die gewollt ist: 58 Prozent ueber den 55 des
   Blattes ergeben zusammen rund 81. Der Sprung beim Aufloesen ist
   damit klein genug, um als Entwickeln zu lesen und nicht als
   Schalter. Bei 88 Prozent waeren es 95 gewesen.

   WARUM DIE UNSCHAERFE MITWAECHST: sie ist ein absoluter Wert, das
   Bild dahinter aber nicht. 46 sind bei 1280 Bildpunkten Breite
   dreieinhalb Prozent des Bildes, bei 375 waeren es zwoelf. Mit
   festem grossen Wert war bei 375 nachgesehen nichts mehr zu
   ahnen, sondern nur noch Weiss mit einem goldenen Schimmer -
   dieselbe Falle wie oben, nur von der anderen Seite. Die
   Endwerte sind angesehen (20 bei 375, 46 bei 1280), dazwischen
   laeuft es mit der Breite. Kein Umbruch, weil es keine Grenze
   gibt, an der die Wirkung springt.

   WARUM ueber clip-path: bewegt wird ausschliesslich die
   Geometrie, die Unschaerfe bleibt konstant. Ein animierter
   Blur-Radius kostet pro Bild eine neue Faltung ueber die ganze
   Flaeche und sieht dabei schlechter aus - eine schrumpfende
   Flaeche mit festem Blur ist billig und ruhig.

   WAS BEWUSST NICHT: kein wanderndes Logo (--logo-fahrt und die
   Koordinaten aus js/logo-fahrt.js werden nicht angefasst, siehe
   Begruendung dort), kein Bildzoom, kein Aufhellen des Heros,
   keine Ueberschreibung am Hero-Logo.

   Und im Auftakt: kein Heranfahren der Marke, kein Aufziehen der
   Laufweite, kein Schweben, kein Schimmer, der ueber die Lettern
   laeuft. Bewegt wird ihre Deckung, sonst nichts. Je Akt genau
   ein bewegtes Teil - im Auftakt die Deckung der Marke, in der
   Blende die Geometrie des Glases. Sie ueberlappen sich um einen
   Wimpernschlag, damit es ein Vorgang bleibt und nicht zwei.

   SCHMALE GERAETE: die Blende laeuft auch dort, und das ist gegen
   die erste Vermutung entschieden. Die Logo-Fahrt hoert bei 44rem
   auf, weil sie am Scrollweg haengt und der auf dem Telefon zu
   kurz ist. Diese Blende haengt an der Zeit und nicht am Scrollen,
   und die Strecke ist dort sogar laenger: nachgemessen bei 375 mal
   812 faehrt die Oberkante 575 von 812 Bildpunkten, also 71
   Prozent der Hoehe. Was bei 375 nicht trug, war nicht der Bogen,
   sondern das Material - und das ist oben geloest, indem die
   Unschaerfe mitwaechst. Ein blosses Aufblenden waere hier der
   schwaechere Vorgang gewesen, nicht der ruhigere.

   Die Choreografie steht in js/einstieg.js, weil die Ziel-
   Geometrie gemessen werden muss: sie haengt an Fassung und
   Fenstergroesse. Hier steht nur, WIE die Flaeche aussieht.
   ------------------------------------------------------------ */

/* Ohne das Merkmal am Wurzelelement existiert der Einstieg nicht.
   Das ist der Normalfall und nicht die Ausnahme: zweiter Aufruf
   im selben Reiter, reduzierte Bewegung, abgeschaltetes Skript.
   Die leeren Elemente liegen trotzdem im Markup - nur so steht der
   Ausgangszustand im ERSTEN gemalten Bild und blitzt der Hero
   nicht einmal kurz auf, bevor das Glas darueber liegt. */
.einstieg { display: none; }

/* Der Traeger. Er zeichnet selbst nichts, er haelt nur die beiden
   Teile und legt fest, wo sie im Stapel stehen.

   Glas und Marke sind bewusst Geschwister und nicht ineinander
   verschachtelt: der Clip-Pfad der Blende wuerde ein Kind mit
   abschneiden, und dann liefe die Marke waehrend der Uebergabe in
   eine Kante. So beruehren sie sich nicht. */
:root[data-einstieg] .einstieg {
  display: block;
  position: fixed;
  inset: 0;
  /* Ueber dem fahrenden Hero-Logo (45), unter dem Kopf, der fuer
     die Dauer der Einblendung hochgesetzt wird (siehe unten).
     Ohne diese beiden Zeilen ginge die Rechnung nicht auf: das
     Hero-Logo liegt bildschirmfest auf 45 und damit ueber dem
     Kopf auf 40. Eine Flaeche unter 40 laege auch unter dem Logo,
     und dann stuende die grosse Wortmarke von der ersten
     Millisekunde an scharf auf dem Glas, statt daraus zu
     erscheinen. */
  z-index: 46;
  /* Die Seite wartet nie auf die Einblendung: Zeiger gehen
     hindurch, Inhalt und Bedienung stehen ab der ersten Sekunde.
     Das Glas liegt darueber und ist niemals eine Sperre. */
  pointer-events: none;
}

.einstieg__glas {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--wp--preset--color--base) 58%, transparent);
  backdrop-filter: blur(clamp(1.25rem, 3.6vw, 3rem)) brightness(1.06) saturate(0.8);
  -webkit-backdrop-filter: blur(clamp(1.25rem, 3.6vw, 3rem)) brightness(1.06) saturate(0.8);
  /* Die Blende faehrt seit dem 2026-09-25 ueber transform statt
     clip-path (Begruendung in js/einstieg.js). Ursprung oben links,
     weil das Skript von dort aus auf das Blatt skaliert. */
  transform-origin: 0 0;
  will-change: transform, opacity;
}

/* ------------------------------------------------------------
   Der Auftakt: die Marke steht einmal gross in der Mitte.

   Sie kommt, sie steht, sie geht - und bewegt dabei NICHTS ausser
   ihrer Deckung. Kein Heranfahren, kein Aufziehen der Laufweite,
   kein Schweben. Das ist die ganze Entscheidung: eine Marke, die
   sich beim Auftritt bewegt, wirbt um Zustimmung; eine, die
   einfach da ist und wieder geht, hat sie schon.

   Sie sitzt in der Flaeche UNTER dem Kopf, nicht im Fenster: der
   Kopf ist waehrend der Einblendung ein deckendes weisses Band,
   und auf die Fenstermitte gerechnet saesse die Marke sichtbar zu
   tief in dem Raum, den man tatsaechlich als Bild wahrnimmt.

   Und dort nicht auf 50, sondern auf 46 Prozent. Das ist die
   optische Mitte: geometrisch mittig gesetzte Schrift wirkt
   verlaesslich eine Spur zu tief, weil das Auge den Schwerpunkt
   ueber der Mitte erwartet. Nachgesehen bei 1280 mal 720 sind das
   25 Bildpunkte, und man sieht sie.

   Groesser als das Hero-Logo (dort clamp(15rem, 38vw, 34rem)),
   und das ist Absicht: die Marke tritt gross auf und nimmt danach
   ihren kleineren Platz im Satzspiegel ein. Ein Auftakt, der
   genauso gross ist wie der Dauerzustand, ist kein Auftakt.

   Die Obergrenze stand zuerst auf 38rem. Nachgemessen war die
   Marke damit bei 1680 nur noch zwoelf Prozent groesser als das
   Hero-Logo - zu wenig, um als Auftritt zu lesen. 44rem haelt den
   Abstand ueber alle Breiten bei rund einem Drittel.

   Die Deckung steht auf null. Damit ist der erste gemalte Zustand
   Glas ohne Marke - sie taucht daraus auf, statt beim Laden schon
   dazustehen. */
.einstieg__marke {
  position: absolute;
  left: 50%;
  top: calc(var(--wp--custom--kopf--hoehe) + (100% - var(--wp--custom--kopf--hoehe)) * 0.46);
  transform: translate(-50%, -50%);
  width: clamp(16rem, 50vw, 44rem);
  max-width: calc(100% - 2 * var(--wp--preset--spacing--50));
  height: auto;
  opacity: 0;
  will-change: opacity, transform;
}

/* Der Kopf ist die Konstante, an der das Auge sich festhaelt, und
   seine Wortmarke ist die, die man zuerst sieht. Er bleibt die
   ganze Zeit scharf und bedienbar und liegt deshalb fuer die
   Dauer der Einblendung ueber der Flaeche. Sein eigenes Milchglas
   nimmt dabei das Glas darunter als Untergrund - beides zusammen
   ergibt ein fast deckendes Weiss, und genau so soll es sein: ein
   ruhiges Band oben, unter dem sich etwas bewegt.

   Danach faellt das Merkmal weg und der Kopf steht wieder auf
   seinen 40. */
:root[data-einstieg] .site-head { z-index: 50; }

/* Die schwebenden Werkzeuge des Entwurfs liegen hoeher als die
   Flaeche und klebten sonst scharf auf dem Glas - das liest sich
   wie ein Fehler, nicht wie eine Absicht. Sie werden fuer die
   Dauer zurueckgehalten und blenden am Ende ruhig ein.

   Der Schnellkontakt ist nicht Werkzeug, sondern Teil der
   spaeteren Seite. Er wird trotzdem zurueckgehalten, weil er auf
   55 liegt und damit im selben Fall steckt: zwei scharfe
   Marine-Knoepfe ueber einer Milchglasflaeche sind kein Angebot,
   sondern ein Bruch. Erreichbar bleibt die Kanzlei die ganze Zeit
   ueber den Kopf.

   Die Ueberblendung steht bewusst an den Elementen selbst und
   nicht in der Regel darueber: sie muss noch greifen, wenn das
   Merkmal schon weg ist. Keines der drei hatte bisher einen
   Uebergang auf opacity, hier wird also nichts ueberschrieben. */
.switch,
.notice,
.kontakt-schnell {
  transition: opacity var(--wp--custom--transition--slow);
}

:root[data-einstieg] .switch,
:root[data-einstieg] .notice,
:root[data-einstieg] .kontakt-schnell {
  opacity: 0;
}

/* Ohne backdrop-filter gibt es keine Unschaerfe, sondern nur einen
   Schleier - und durch den laese man die Zeichnung, statt sie zu
   ahnen. Dieselbe Antwort wie beim Blatt und beim Kopf: dann
   traegt allein das Weiss und muss dichter stehen. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .einstieg__glas {
    background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
  }
}

/* Reduzierte Bewegung: gar keine Einblendung. Das Kopf-Skript
   setzt das Merkmal in diesem Fall erst nicht, der Endzustand
   steht also sofort. Diese Regel ist der Guertel zum Hosentraeger
   - falls das Merkmal doch einmal von Hand gesetzt wird, etwa zum
   Nachstellen, bleibt die Flaeche hier trotzdem fort. */
@media (prefers-reduced-motion: reduce) {
  :root[data-einstieg] .einstieg { display: none; }
  :root[data-einstieg] .site-head { z-index: 40; }
  :root[data-einstieg] .switch,
  :root[data-einstieg] .notice,
  :root[data-einstieg] .kontakt-schnell { opacity: 1; }
}

/* ============================================================
   30. Das Klappfeld als Register (Menue-Fassung 1)
   ------------------------------------------------------------
   Ergaenzt am 2026-08-03.

   Das Klappfeld der Rechtsgebiete stand bis hierher auf dem
   Stand VOR der Register-Entscheidung: drei Spalten, zeilenweise
   gefuellt, fuenfzehn gleich schwere Woerter ohne Ziffer und
   ohne Linie. Abschnitt 23 hat fuer genau diese Aufgabe - fuenf-
   zehn Gebiete ordnen - bereits eine Antwort gefunden und sie
   dort begruendet:

     1. Keine Symbole. Eine Registerziffer ordnet.
     2. Zwei Spalten statt drei, spaltenweise gefuellt. Bei drei
        Spalten zerfaellt die Zeile in Stuecke, die zu kurz sind,
        um eine Linie zu tragen.
     3. Beim Zeigen bewegt sich Farbe, nicht Flaeche.

   Die Navigation hatte diese Antwort nicht mitbekommen. Dieser
   Abschnitt traegt sie nach - dieselbe Grammatik, nicht eine
   zweite Erfindung. Die Zeichen aus dem SVG-Vorrat bleiben
   deshalb ausdruecklich AUSSEN VOR: sie im Menue einzusetzen,
   waere gegen Entscheidung 1.

   EINE FASSUNG, kein Schalter. Es gab hier fuer wenige Stunden
   zwei Fassungen an einem Attribut (data-navfassung). Das ist
   ausgebaut, und der Grund gehoert in die Akte: die Wirkung des
   Schalters war nur zu sehen, solange das Menue aufgeklappt
   blieb - im Ruhezustand geklickt passierte sichtbar nichts.
   Ein Bedienelement, das man nur zusammen mit einem zweiten
   bedienen kann, ist keines. Wer die alte Anordnung sucht,
   findet sie in der Versionsgeschichte.

   Nur am Desktop. Unter 60rem faellt das Feld ohnehin in die
   Schublade und wird einspaltig (Abschnitt 7); Ziffern und
   Spalten haetten dort nichts zu ordnen.
   ------------------------------------------------------------ */
@media (min-width: 60.001rem) {

  /* Zwei Spalten brauchen mehr Breite als drei - jede einzelne
     Zeile ist jetzt laenger, und keine darf umbrechen. Bricht ein
     Name doch, verschiebt er die Linien seiner Spalte gegen die
     Nachbarspalte, und genau der Rhythmus-Bruch, der behoben
     werden soll, waere wieder da. 47rem traegt den laengsten
     Eintrag ("Prozesse, Schiedsverfahren & Mediation") samt
     Ziffernspalte. */
  .nav__panel[data-rg-source] {
    min-width: 47rem;
    max-width: min(47rem, calc(100vw - 2rem));
  }

  /* Spaltenweise gefuellt, nicht zeilenweise: ein Register liest
     man senkrecht. 01 bis 06 links, 07 bis 12 rechts.

     Die Plaetze stehen ausdruecklich statt ueber den Auto-Fluss.
     Mit grid-auto-flow: column laege der Sprung-Eintrag ganz oben
     rechts neben dem Lead, mit dem Zeilenfluss landete der siebte
     Eintrag unter dem sechsten statt in der zweiten Spalte. Bei
     einer Liste, deren Laenge sich alle paar Jahre um ein Gebiet
     aendert, ist die ausdrueckliche Fassung die ehrlichere:
     faellt eines weg oder kommt eines dazu, steht hier, wo die
     Spalte bricht.

     Genau das ist zweimal eingetreten. Am 2026-08-24 fiel ein
     Gebiet weg, aus acht und sieben wurde sieben und sieben. Am
     2026-08-28 fielen zwei weitere - da blieb die Aufteilung
     aber stehen, und weil die Plätze für vierzehn Gebiete
     galten, standen die zwölf als sieben links und fünf
     rechts. Seit dem 2026-09-02 sind es sechs und sechs. Die
     Zeilenzahl unten geht deshalb bis sechs, nicht bis sieben:
     eine Zeile mehr als gebraucht bleibt leer stehen und zieht
     die Fußlinie der kürzeren Spalte auseinander. */
  .nav__panel[data-rg-source] .nav__panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(6, auto);
    gap: 0 var(--wp--preset--spacing--50);
    counter-reset: navrg;
  }

  /* Der Weg auf die Seite spannt ueber beide Spalten und bleibt,
     was er ist: keine Ziffer, keine Linie unter sich. */
  .nav__panel[data-rg-source] .nav__panel-lead {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Der Pfeil klebte am letzten Buchstaben ("Alle Rechtsgebiete→").
     Das ist kein Fehler dieser Fassung, sondern gilt im ganzen
     Projekt: .arrow traegt nirgends einen Abstand, und im Markup
     steht der Span direkt hinter dem Wort. Hier faellt es auf,
     weil der Lead jetzt allein ueber zwei Spalten steht - also
     wird es hier behoben. Die uebrigen Fundstellen (Profil
     ansehen, Zu Aktuelles und weitere) bleiben unangetastet: eine
     projektweite Regel gehoert nicht in einen Menue-Umbau. */
  .nav__panel .nav__panel-lead .arrow {
    margin-left: 0.35em;
  }

  /* 01 bis 06 in die linke Spalte, 07 bis 12 in die rechte.
     Kind 1 ist der Lead, die Gebiete sind Kind 2 bis 13.

     Auf sechs und sechs umgestellt am 2026-09-02. Die Plätze
     standen noch auf vierzehn Gebieten (sieben links, sieben
     rechts), seit dem 2026-08-28 sind es zwölf. Die Folge war im
     Bild zu sehen und wurde vom Operator gemeldet: links sieben
     Zeilen, rechts fünf - eine Spalte zwei Zeilen länger als die
     andere, und der Rhythmus, den die ausdrücklichen Plätze
     gerade sichern sollen, war dahin. Die beiden Regeln für die
     nicht mehr vorhandenen Kinder 14 und 15 sind entfallen; sie
     hätten bei der nächsten Erweiterung still danebengegriffen. */
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(2)  { grid-area: 2 / 1; }
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(3)  { grid-area: 3 / 1; }
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(4)  { grid-area: 4 / 1; }
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(5)  { grid-area: 5 / 1; }
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(6)  { grid-area: 6 / 1; }
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(7)  { grid-area: 7 / 1; }
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(8)  { grid-area: 2 / 2; }
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(9)  { grid-area: 3 / 2; }
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(10) { grid-area: 4 / 2; }
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(11) { grid-area: 5 / 2; }
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(12) { grid-area: 6 / 2; }
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(13) { grid-area: 7 / 2; }

  /* Die Haarlinie liegt am Traeger, nicht am Verweis: sie soll
     ueber die ganze Spaltenbreite laufen, auch neben der Ziffer. */
  .nav__panel[data-rg-source] .nav__panel-grid li:not(.nav__panel-lead) {
    border-bottom: var(--wp--custom--rule--soft);
  }

  /* Die letzte Zeile jeder Spalte ohne Linie. Eine Linie am Ende
     einer Liste schliesst nichts ab, sie kuendigt eine weitere
     Zeile an, die nicht kommt. (Wortgleich zu Abschnitt 23 - es
     ist dieselbe Regel, nur an einem zweiten Ort.)

     Am 2026-09-02 von Kind 8 auf Kind 7 gezogen: das ist der neue
     Fuß der linken Spalte. Der Fuß der rechten bleibt last-child
     und braucht keine Zahl - er ist immer der letzte, gleich wie
     viele Gebiete die Kanzlei führt. */
  .nav__panel[data-rg-source] .nav__panel-grid li:nth-child(7),
  .nav__panel[data-rg-source] .nav__panel-grid li:last-child {
    border-bottom: 0;
  }

  /* Ziffer und Name auf einer Grundlinie. Die Unterkante des
     Verweises traegt hier KEINE Linie mehr - die sitzt am
     Traeger daruber; ohne dieses Zuruecksetzen stuenden zwei
     Linien uebereinander. */
  .nav__panel[data-rg-source] .nav__panel-grid li:not(.nav__panel-lead) a {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--wp--preset--spacing--20);
    padding: 0.5rem 0;
    border-bottom: 0;
    color: var(--wp--preset--color--muted);
    transition: color var(--wp--custom--transition--state);
  }

  /* Die Ziffer kommt aus dem Zaehler, nicht aus dem Markup. Eine
     Registerziffer ist eine Folge, kein Inhalt: wer sie schreibt,
     pflegt sie beim sechzehnten Gebiet von Hand nach - und zwar
     in einundzwanzig Seiten gleichzeitig, weil das Menue ueberall
     steht. */
  .nav__panel[data-rg-source] .nav__panel-grid li:not(.nav__panel-lead) a::before {
    counter-increment: navrg;
    content: counter(navrg, decimal-leading-zero);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: var(--wp--custom--weight--heading);
    letter-spacing: var(--wp--custom--tracking--label);
    font-variant-numeric: tabular-nums;
    /* 65 Prozent wie im Register der Seite: eine Registerziffer
       ist lesbarer Text, keine Zierde, also gilt 4,5 und nicht
       3,0. Sie bleibt trotzdem deutlich leichter als der Name
       daneben - die Hierarchie kommt aus dem Abstand der beiden
       Werte, nicht aus dem Unterschreiten einer Schwelle. */
    /* Seit dem 2026-09-03 auch in Ruhe im Logo-Gold (Textfassung
       #836A3A, 5,1:1 auf Weiss): die Kanzlei will das Gold der
       Zierlinie "bei der Nummerierung der Rechtsgebiete" sehen
       (Mail von Dr. Uhlmannsiek vom 2026-09-01), nicht erst beim
       Zeigen. Die Hierarchie zum Namen bleibt ueber Groesse und
       Laufweite erhalten. */
    color: var(--wp--preset--color--accent-logo-text);
    transition: color var(--wp--custom--transition--state);
  }

  /* Beim Zeigen bewegt sich Farbe, nicht Flaeche: die Ziffer geht
     auf den Akzent, der Name auf volle Tinte. Die Akzentlinie der
     alten Fassung entfaellt damit - zwei Zeichen fuer denselben
     Zustand waeren eins zu viel. */
  .nav__panel[data-rg-source] .nav__panel-grid li:not(.nav__panel-lead) a:hover,
  .nav__panel[data-rg-source] .nav__panel-grid li:not(.nav__panel-lead) a:focus-visible {
    color: var(--wp--preset--color--ink);
    border-bottom-color: transparent;
  }

  /* Die Registerziffer geht seit dem 2026-09-02 auf die
     Textfassung des Logo-Golds statt auf den eingestellten
     Akzent. Kundenwunsch aus der Mail vom 2026-09-01: dieselbe
     goldene Linie auch dort, wo die Ziffern der Rechtsgebiete
     stehen. Vorher lieferte --accent auf [data-accent="orange"]
     ein #F49E00 - die Ziffer unter dem Menü stand damit in einem
     anderen Gold als der Strich über ihr.

     Nicht --accent-logo, sondern --accent-logo-text: eine Ziffer
     ist Text und nicht Zierde. #AC9268 misst auf dem Milchglas
     des Feldes rund 2,9:1, #836A3A misst 5,14:1 (am 2026-09-02
     nachgerechnet); die Hausregel verlangt 4,5:1. Es ist
     derselbe Goldton, nur so weit abgedunkelt, dass man ihn
     lesen kann - dieselbe Beziehung wie zwischen der Zierlinie
     im Logo und der Schrift daneben. */
  .nav__panel[data-rg-source] .nav__panel-grid li:not(.nav__panel-lead) a:hover::before,
  .nav__panel[data-rg-source] .nav__panel-grid li:not(.nav__panel-lead) a:focus-visible::before {
    color: var(--wp--preset--color--accent-logo-text);
  }

  /* Das zweite Feld bekommt KEINE Ziffern. Bis zum 2026-08-03 war
     das die Liste unter "Kanzlei", seit dem 2026-08-24 sind es die
     elf Namen unter "Anwaelte" - die Begruendung ist dieselbe
     geblieben und traegt fuer Namen sogar staerker: eine Ziffer vor
     einem Menschen ordnet nicht, sie nummeriert ihn. Die Haarlinie
     bekommen sie schon, damit die beiden Felder als ein Bauteil in
     zwei Groessen lesbar bleiben und nicht als zwei verschiedene
     Dinge. */
  .nav__panel:not([data-rg-source]) .nav__panel-grid li:not(.nav__panel-lead) {
    border-bottom: var(--wp--custom--rule--soft);
  }

  /* Die letzte Zeile ohne Linie - hier ueber nth-last-child, nicht
     ueber feste Plaetze wie beim Register.

     Der Grund ist der Fuellweg: das Rechtsgebiets-Feld ist
     spaltenweise gesetzt, dieses hier laeuft zeilenweise. Der
     zweite Eintrag ist also NICHT das Ende der linken Spalte,
     sondern ihr Anfang - eine Regel auf nth-child(2) nahm die
     Linie an der falschen Stelle weg (so gebaut und am
     2026-08-03 im Bild korrigiert).

     Die beiden letzten Kinder sind bei zweispaltigem Zeilenfluss
     immer die Enden der beiden Spalten, gerade wie ungerade
     Anzahl. Damit traegt die Regel auch bei den elf Namen unter
     "Anwaelte" - und beim zwoelften, wenn jemand dazukommt. */
  .nav__panel:not([data-rg-source]) .nav__panel-grid li:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .nav__panel:not([data-rg-source]) .nav__panel-grid li:not(.nav__panel-lead) a {
    padding: 0.5rem 0;
    border-bottom: 0;
    color: var(--wp--preset--color--muted);
    transition: color var(--wp--custom--transition--state);
  }

  .nav__panel:not([data-rg-source]) .nav__panel-grid li:not(.nav__panel-lead) a:hover,
  .nav__panel:not([data-rg-source]) .nav__panel-grid li:not(.nav__panel-lead) a:focus-visible {
    color: var(--wp--preset--color--ink);
  }

  /* Das Feld unter "Anwaelte", ergaenzt am 2026-08-24.

     Kein eigener Bauplan, nur eine Breite: alles Uebrige - Raster,
     Haarlinien, Lead, Farbwechsel beim Zeigen - kommt aus den
     :not([data-rg-source])-Regeln darueber, die seit dem Wegfall
     des Kanzlei-Felds ohne Gegenstueck dastanden. Sie beschreiben
     genau dieses Bauteil, also erbt es sie, statt sich ein zweites
     schreiben zu lassen.

     Warum die Breite trotzdem sein muss: die Grundbreite von 20rem
     ist auf Stichworte gerechnet ("Anfahrt", "Das Team"). Zwei
     Spalten davon sind je rund 9rem, und "Philipp-Alexander
     Wagner" braucht 172 Pixel. Ein Name, der umbricht, liest sich
     als zwei Personen - genau dieser Bruch stand am 2026-08-24 bei
     26rem noch im Bild, vier Pixel zu knapp.

     28rem gibt der Spalte 186 Pixel. Der Ueberschuss ist Absicht
     und nicht Schlamperei: er traegt den Titel, den eine der elf
     Personen morgen vor ihren Namen setzt, ohne dass jemand diese
     Zahl noch einmal nachrechnen muss.

     Nur hier im Desktop-Block, nicht weiter oben: unter 60rem
     faellt das Feld in die Schublade, und dort haette eine feste
     Breite dieselbe Bescherung angerichtet wie beim Register am
     2026-08-03 (Abschnitt 7). */
  .nav__panel--anwaelte {
    min-width: 28rem;
    max-width: min(28rem, calc(100vw - 2rem));
  }

  /* Die Flaeche beruhigen. Das Milchglas ist bei vier Punkten eine
     schoene Geste; hinter zwoelf bis fuenfzehn Zeilen laeuft das
     Treppenbild sichtbar durch den Text und wechselt hell/dunkel
     mitten in den Woertern. Beide langen Felder brauchen Ruhe, also
     stehen sie dichter - die Unschaerfe bleibt, der Grund traegt
     jetzt aber. */
  .nav__panel[data-rg-source],
  .nav__panel--anwaelte {
    background: color-mix(in srgb, var(--wp--preset--color--base) 97%, transparent);
  }
}

/* ============================================================
   29. Bildsprache: Lichtschacht und Pop-Art
   ------------------------------------------------------------
   Die zweite Stellschraube neben den Hero-Fassungen, und
   bewusst von ihnen getrennt. Die Hero-Fassungen sind eine
   Reihe von Entscheidungen ueber den Hero; welche Bildwelt die
   Unterseiten und die Nachrichten tragen, ist eine davon
   unabhaengige Frage. Wer beides koppelte, koennte spaeter
   "Lichtschacht-Bilder mit warmem Hero" nicht mehr zeigen.

     :root[data-bildsprache="lichtschacht"]   Fassung 1, Vorgabe
     :root[data-bildsprache="popart"]         Fassung 2

   Das Attribut steht am <html> und wird in jeder Seite bereits
   im Kopf gesetzt (Inline-Skript, vor dem ersten Malen) sowie
   in js/version-switch.js bedient und gemerkt.

   ACHTUNG NAMENSGEBUNG: nicht data-bildwelt. Dieser Name ist im
   Projekt schon vergeben - an den <img> der Seitenkoepfe
   bezeichnet er die EBENE des Entwicklerbad-Uebergangs
   (foto | popart, siehe js/uebergang.js und css/unterseiten.css)
   und nicht die Bildsprache. Zwei Bedeutungen unter einem Namen,
   an derselben Sorte Element, waeren eine Falle fuer den
   Naechsten.
   ------------------------------------------------------------ */

/* Der ganze Schalter in zwei Zeilen: was nicht zur aktiven
   Fassung gehoert, ist fort. Kein Markup verzweigt, nichts wird
   per Skript ein- und ausgehaengt.

   display statt opacity ist Absicht. Ein nur durchsichtiges Bild
   bliebe im Fluss stehen, faenge Klicks ab und wuerde von jedem
   Browser geladen; ausgeblendete Bilder mit loading="lazy" laedt
   keiner. Genau darauf beruht die Lade-Rechnung: die zweite
   Fassung kostet Markup, aber keine Bytes, solange sie nicht
   gewaehlt wird. */
/* Erweitert am 2026-09-02 um die beiden gezeichneten Bildwelten
   "linie" und "messing". Die Regel zaehlt nicht mehr Paare auf -
   das waeren bei vier Sprachen zwoelf Zeilen -, sondern blendet
   pauschal alles aus, was nicht die gewaehlte Sprache traegt.
   Wer eine fuenfte ergaenzt, fuegt hier genau eine Zeile hinzu. */
/* 1. Die beiden Ur-Fassungen blenden alles aus, was nicht ihnen
      gehoert. Fuer sie gibt es ueberall eine eigene Fassung. */
:root[data-bildsprache="lichtschacht"] [data-bildsprache]:not([data-bildsprache="lichtschacht"]),
:root[data-bildsprache="popart"]       [data-bildsprache]:not([data-bildsprache="popart"]) {
  display: none;
}

/* 2. Linie und Messing raeumen die Foto-Fassung und die jeweils
      andere gezeichnete Fassung immer weg. */
:root[data-bildsprache="linie"]   [data-bildsprache="lichtschacht"],
:root[data-bildsprache="linie"]   [data-bildsprache="messing"],
:root[data-bildsprache="messing"] [data-bildsprache="lichtschacht"],
:root[data-bildsprache="messing"] [data-bildsprache="linie"] {
  display: none;
}

/* 3. Popart weicht nur DORT, wo die gewaehlte Sprache eine eigene
      Fassung mitbringt. Die beiden neuen Sprachen decken heute die
      Artikelbilder ab, nicht die Titelbaender - ohne diese
      Einschraenkung blieben dort leere Kacheln stehen. Wer spaeter
      Titelbaender in Linie oder Messing nachlegt, muss hier nichts
      aendern: sobald das Geschwisterbild im Markup liegt, greift
      die Regel von selbst. */
:root[data-bildsprache="linie"]   :has(> [data-bildsprache="linie"])   > [data-bildsprache="popart"],
:root[data-bildsprache="messing"] :has(> [data-bildsprache="messing"]) > [data-bildsprache="popart"] {
  display: none;
}

/* 4. AUSNAHME: die Fusions-Kachel folgt der Bildsprache nicht mehr.

      Die Kanzlei hat sich am 2026-09-09 auf das Foto des Hauseingangs
      festgelegt. Ihr Einwand galt der gemalten Fassade insgesamt
      ("die Treppe ist auch nicht die richtige"), nicht einer einzelnen
      Bildwelt. Die gezeichneten Geschwister sind deshalb aus dem
      Markup genommen - ohne diese Regel bliebe die Kachel in den
      uebrigen Bildwelten aber leer, weil Regel 1 und 2 oben alles
      ausblenden, was nicht die gewaehlte Sprache traegt.

      Auch lichtschacht ist eingeschlossen. Der Grund ist praktisch:
      diese Bildwelt steht nicht mehr in der Schalterleiste, kann aber
      als alter Wert in einer Browser-Sitzung liegen - und dann saehe
      genau der Partner, der sie einmal ausprobiert hat, weiter das
      alte Motiv. Die komponierte Logo-Wand (.fusion-marken) ist
      deshalb abgekoppelt und wird unten ausgeblendet; sie laege sonst
      ueber dem Foto.

      ZUR SPEZIFITAET, weil hier schon einmal danebengegriffen wurde:
      Regel 1 zaehlt 0,4,0 (:root, das Attribut daneben, das Attribut
      am Ziel und das :not). Eine Fassung mit nur einer Klasse kam auf
      0,3,1, verlor - und die Kachel blieb in Popart und Lichtschacht
      LEER, nicht etwa alt. Deshalb stehen hier zwei Klassen: das
      ergibt 0,4,1 und gewinnt knapp, ohne !important. */
:root .fusion-kachel .fusion-kachel__figur img[data-bildsprache="messing"] {
  display: block;
}

/* Die Logo-Wand bleibt im Markup (ihre Flucht haengt rechnerisch an
   dieser Stelle), steht aber nicht mehr im Blatt. Wer sie
   zurueckholt, nimmt diese vier Zeilen heraus und gibt dem Traeger
   sein data-bildsprache zurueck. */
.fusion-kachel__figur .fusion-marken {
  display: none;
}

/* ------------------------------------------------------------
   Das neue Logo auf der erzeugten Buehne, Probefassung vom
   2026-09-16. Die Box umschliesst die sichtbare Buehne (Rechnung
   wie bei .fusion-marken darunter, nur mit 1600:894), das Logo
   sitzt darin in Prozent - so wandert es beim Zuschneiden der
   Kachel mit dem Bild und nicht mit dem Kasten.
   ------------------------------------------------------------ */
/* Die Ebene zeigt sich nur ueber der Podest-Buehne. Der FUSION-
   Schalter tauscht nur den Dateinamen im src, deshalb haengt die
   Regel daran: ueber dem Fassadenfoto oder der Logo-Wand laege
   sonst ein zweites Logo. */
.fusion-kachel__figur .fusion-podest { display: none; }

.fusion-kachel__figur:has(img[src$="fusion-podest.webp"]) .fusion-podest {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  /* Dieselbe Geometrie wie object-fit: cover, aber ohne
     Container-Einheiten: die messen in dieser Figur 0, weil ihre
     Hoehe aus der Textspalte daneben kommt und damit fuer
     container-type: size nicht als feste Groesse gilt.
     height 100% plus Seitenverhaeltnis ergibt die Breite des
     Bildes, min-width haelt die Box ueber der Figur, wenn diese
     breiter als hoch ist. Genau so schneidet cover zu. */
  height: 100%;
  aspect-ratio: 1600 / 894;
  min-width: 100%;
  pointer-events: none;
}

.fusion-kachel__figur .fusion-podest__logo {
  position: absolute;
  left: 50%;
  top: 43%;
  translate: -50% -50%;
  width: 52%;
  height: auto;
  /* Multiply legt die Wortmarke in die Wand statt auf sie: das
     warme Licht der Buehne scheint durch, weisse Flaechen der
     Datei verschwinden. */
  mix-blend-mode: multiply;
}


/* ------------------------------------------------------------
   29b. Titelbaender hell oder dunkel

   Dritte Stellschraube, ergaenzt am 2026-08-03. Sie waehlt
   INNERHALB der ruhigen Bildwelt zwischen zwei Saetzen Titel-
   baender: den hellen aus der Regrade-Runde vom selben Tag und
   den dunkleren, die vorher standen.

     (kein Attribut)                 hell, Vorgabe
     :root[data-titelbild="dunkel"]  die frueheren, dunklen

   Warum eine eigene Stellschraube und kein dritter Wert bei
   data-bildsprache: die Bildsprache entscheidet, OB die Seite
   fotografisch oder gezeichnet auftritt. Welcher von zwei
   Auszuegen desselben Fotos dabei laeuft, ist eine Frage darin,
   keine daneben. Waeren beide in einem Attribut, liesse sich
   "dunkles Band" und "Pop-Art" nicht mehr unabhaengig zeigen.

   Warum die Vorgabe am fehlenden Attribut haengt und nicht an
   data-titelbild="hell": so tragen die achtzehn Seitenkoepfe im
   <html> keinen zusaetzlichen Wert, und eine Seite, die den
   Schalter nie gesehen hat, zeigt trotzdem das Richtige.

   display statt opacity, aus demselben Grund wie eine Regel
   weiter oben: das nicht gewaehlte Band traegt loading="lazy"
   und wird gar nicht erst geholt.
   ------------------------------------------------------------ */
:root:not([data-titelbild="dunkel"]) .seitenkopf__figur img[data-titelbild="dunkel"],
:root[data-titelbild="dunkel"] .seitenkopf__figur img[data-titelbild="hell"] {
  display: none;
}

/* Der Seitenkopf in Fassung 1: ein ruhiges Standbild, sonst
   nichts. Kein Uebergang, keine Zeichnung - Operator-Entscheid
   vom 2026-08-03 ("in den Titelbildern der Unterseiten keinen
   Uebergang zu Pop-Art, sondern wirklich nur eine Version").

   Die Schicht des Uebergangs-Moduls wird hier abgeraeumt. Sie
   liegt ueber dem Standbild und traegt in Fassung 1 nichts, was
   man sehen wollte. js/uebergang.js baut sie in dieser Fassung
   gar nicht erst auf; diese Regel ist der Guertel zum
   Hosentraeger fuer den Fall, dass sie aus einer frueheren
   Fassung noch steht. */
:root[data-bildsprache="lichtschacht"] .seitenkopf__figur .uebergang,
:root[data-bildsprache="lichtschacht"] .titelbild__figur .uebergang {
  display: none;
}

/* Der Texttraeger des Seitenkopfs ist fuer die alte Bildwelt
   gerechnet: die Zeichnung ist ueber weite Strecken fast weiss,
   deshalb steht er dort dicht (88 % unten, 62 % von links).

   Die Lichtschacht-Baender sind von sich aus dunkel und ruhig.
   Derselbe Traeger darueber machte den Kopf schwer und nahm ihm
   genau das, was er zeigen soll. Er wird deshalb in Fassung 1
   deutlich zurueckgenommen - so weit, dass Weiss auf dem
   hellsten der fuenf Baender noch sicher traegt, aber das Motiv
   sichtbar bleibt.

   Operator-Wort dazu: "wichtig ist natuerlich, dass es dennoch
   relativ hell bleibt ... trotzdem hell und professionell".

   NICHT NACH GEFUEHL GESETZT, sondern gemessen. Am Band
   blick-nach-unten (dem kontrastreichsten der fuenf) wurde die
   Luminanz unter den echten Textkaesten abgetastet und der
   schlechteste Punkt gerechnet:

     Traeger        Ueberschrift   Fliesstext
     alt 88/62         6,58 : 1      11,25 : 1   (dunkel, unnoetig)
     44/28             3,43 : 1       6,17 : 1   <- diese Fassung
     34/20             3,15 : 1       5,57 : 1   (zu knapp)

   Verlangt sind nach WCAG AA 3:1 fuer die grosse Ueberschrift und
   4,5:1 fuer den Fliesstext. Diese Fassung haelt beides mit
   Reserve und laesst das Bild trotzdem hell.

   Ohne jeden Traeger faellt die hellste Stelle des Bandes auf
   1,98:1 - dort waere Weiss unlesbar. Ganz weglassen geht also
   nicht, so hell die Baender auch wirken. */
:root[data-bildsprache="lichtschacht"] .seitenkopf__figur::after {
  background:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--wp--preset--color--ink-deep) 28%, transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--ink-deep) 10%, transparent) 45%,
      transparent 76%
    ),
    linear-gradient(
      to top,
      color-mix(in srgb, var(--wp--preset--color--ink-deep) 44%, transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--ink-deep) 32%, transparent) 42%,
      color-mix(in srgb, var(--wp--preset--color--ink-deep) 10%, transparent) 70%,
      transparent 100%
    );
}

/* ------------------------------------------------------------
   Die Fusions-Kachel als Komposition

   Kein fertiges Bild, sondern die erzeugte leere Buehne und
   darauf die ECHTEN Logo-Dateien, eingefaerbt per mask-image.
   Der Grund ist kein gestalterischer: ein Bildmodell darf die
   Wortmarken nicht malen. In der Vorbereitung wurde aus GLAUBER
   ein GLAUSER, und ein entstellter Kanzleiname auf der
   Fusions-Kachel ist kein Schoenheitsfehler.

   So bleiben die Wortmarken pixelgenau, die Farbe kommt aus den
   Tokens, die Logos sind jederzeit austauschbar, und auf grossen
   Schirmen ist nichts weich. Werte uebernommen aus
   fusion-vorschau.html, Variante 4.
   ------------------------------------------------------------ */

/* Die Buehne MUSS das Seitenverhaeltnis der Vorlage behalten
   (2752 : 1536), sonst bricht die Flucht der Striche.

   Warum: mask-size "contain" zentriert jedes Logo in seiner Box
   und nimmt dabei den kleineren der beiden Faktoren. Wie hoch
   ein Logo in seiner Box am Ende sitzt, haengt also vom
   Seitenverhaeltnis der BOX ab - und das haengt am Container.
   Die Prozentwerte unten sind fuer 1,79 gerechnet.

   Nachgemessen an der echten Kachel (402 x 272, also 1,48):
     ohne festes Verhaeltnis   Glauber-Strich 8,5 px daneben,
                               PJM-alt-Strich 6,3 px daneben
     mit 1,79                  beide 0,1 px - Flucht steht

   Die Spaltenhoehe bestimmt aber der Text nebenan, nicht das
   Bild. Deshalb sind Buehne und Marken getrennt:

   - Die BUEHNE liegt als Hintergrund auf der Figur und deckt sie
     wie object-fit:cover ab. Beschnitt ist ihr egal: sie ist
     links grosse ruhige Flaeche und rechts Licht, ohne Detail,
     an dem ein Schnitt auffiele.

   - Die MARKEN sitzen in einer Box, die das Verhaeltnis der
     Vorlage haelt und vollstaendig in die Figur passt (min, also
     wie object-fit:contain). Sie darf NICHT ueberstehen: ein
     angeschnittenes G in GLAUBER waere derselbe Fehler wie ein
     falsch gemalter Name.

   Ein erster Versuch liess die Marken mit der Buehne mitlaufen
   (max statt min). Die Flucht stimmte, aber die Box stand ueber
   die Figur hinaus und das overflow:hidden schnitt links den
   Anfang beider Alt-Marken ab - aus GLAUBER wurde LAUBER, aus
   P.J.M wurde J.M. Deshalb min. */
.fusion-kachel__figur { container-type: size; }

:root[data-bildsprache="lichtschacht"] .fusion-kachel__figur {
  background:
    url("../assets/artikel/fusion-buehne.webp") center / cover no-repeat,
    var(--wp--preset--color--surface);
}

.fusion-marken {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(100cqw, calc(100cqh * 2752 / 1536));
  height: min(100cqh, calc(100cqw * 1536 / 2752));
}

/* Ohne Groessen-Container bleibt die Flaeche schlicht gefuellt.
   Die Striche fluchten dann nicht exakt, aber alle drei Marken
   sind vollstaendig zu sehen - der bessere Notfall. Betrifft nur
   Browser vor 2023. */
@supports not (width: 1cqw) {
  .fusion-marken {
    inset: 0;
    width: auto;
    height: auto;
    translate: none;
  }
}

/* Logo als Maske: die Form kommt aus der Datei, die Farbe aus
   dem Token. Was in der PNG an Farbe steht, ist dabei egal -
   gelesen wird nur ihr Alphakanal. */
.fusion-marke {
  position: absolute;
  background-color: var(--wp--preset--color--ink, #00305B);
  -webkit-mask-repeat: no-repeat;      mask-repeat: no-repeat;
  -webkit-mask-size: contain;          mask-size: contain;
  -webkit-mask-position: left center;  mask-position: left center;
}

/* ACHTUNG beim Aendern: mask-size "contain" nimmt den KLEINEREN
   der beiden Faktoren. Ist die Box breiter als das
   Seitenverhaeltnis des Logos hergibt, begrenzt die HOEHE die
   tatsaechliche Breite - eine groessere width-Angabe allein
   macht ein Logo dann NICHT groesser. Beide Werte muessen zum
   Seitenverhaeltnis passen.
     Glauber  2792x932  -> 3.00 : 1
     PJM alt   300x300  -> 1.00 : 1
     PJM neu  1600x648  -> 2.47 : 1

   DIE STRICHE FLUCHTEN. Gemessen in den Dateien:
   Glauber-Strich bei 54,6 % der Logohoehe, PJM-alt-Strich bei
   63,3 %. Die neue Marke traegt an Ober- und Unterkante je eine
   durchgehende Linie. Ihre Box laeuft von 33 % bis 67 % - genau
   darauf liegen die beiden Striche:
     Glauber: 33 - 20 * 0,546 = 22,1
     PJM alt: 67 - 26 * 0,633 = 50,5

   Wer eine dieser Zahlen nach Gefuehl verschiebt, bricht die
   Flucht. Die Rechnung steht hier, damit das nicht passiert. */
.fusion-marke--glauber {
  left: 3%;
  top: 22.1%;
  width: 33.5%;
  height: 20%;
  opacity: .62;
  -webkit-mask-image: url("../assets/logo/freigestellt/glauber-weiss.png");
          mask-image: url("../assets/logo/freigestellt/glauber-weiss.png");
}

.fusion-marke--pjm-alt {
  left: 3%;
  top: 50.5%;
  width: 14.5%;
  height: 26%;
  opacity: .62;
  -webkit-mask-image: url("../assets/logo/freigestellt/pjm-alt-weiss.png");
          mask-image: url("../assets/logo/freigestellt/pjm-alt-weiss.png");
}

.fusion-marke--pjm-neu {
  left: 38%;
  top: 33%;
  width: 46.9%;
  height: 34%;
  -webkit-mask-image: url("../assets/logo/freigestellt/pjm-neu-navy.png");
          mask-image: url("../assets/logo/freigestellt/pjm-neu-navy.png");
}

/* Schmale Flaechen. Wird die Figur sehr klein, ist die kleine
   Zeile "RECHTSANWAELTE" in der Glauber-Marke nicht mehr zu
   entziffern. Dann treten die beiden Alt-Marken ab und nur das
   Ergebnis bleibt stehen - die Schrift zu vergroessern waere der
   falsche Weg, das braeche die Flucht.

   AN DER FIGUR GEMESSEN, NICHT AM FENSTER. Das ist hier kein
   Feinschliff, sondern notwendig: ein Fenster-Grenzwert waere
   genau verkehrt herum. Auf breiten Schirmen ist die Figur nur
   34 % der Kachel (gemessen 402 px), unter 64rem faellt die
   Kachel einspaltig und die Figur wird BREITER als auf dem
   Desktop. Eine Regel bei max-width:40rem haette die Marken also
   dort abgeraeumt, wo sie am besten lesbar sind.

   Die Figur ist ohnehin schon Groessen-Container (oben, fuer die
   Flucht) - die Container-Abfrage kostet also nichts extra. */
@container (max-width: 18rem) {
  .fusion-marke--glauber,
  .fusion-marke--pjm-alt { display: none; }

  /* Allein im Bild darf das Ergebnis mittig und groesser stehen. */
  .fusion-marke--pjm-neu {
    left: 12%;
    top: 33%;
    width: 76%;
    height: 34%;
    -webkit-mask-position: center;  mask-position: center;
  }
}

/* Klappfeld unter "Aktuelles", seit dem 2026-09-23 (Operator-Wunsch):
   zwei Wege statt einem, damit der Arbeitsrechtsreport nicht unter
   den Beitraegen verschwindet. Eine Spalte, schmal - zwei Eintraege
   brauchen kein Raster. */
.nav__panel--aktuelles { min-width: 15rem; }
.nav__panel--aktuelles .nav__panel-grid { grid-template-columns: minmax(0, 1fr); }

/* ------------------------------------------------------------
   31. Logo Nr. 71 hinter dem Logo-Schalter (2026-09-25)

   Nr. 71 ist seit dem 2026-09-25 die Vorgabe: data-logo="71" steht
   im Markup jeder Seite, js/version-switch.js nimmt es fuer
   "Aktuell" weg und tauscht die Bildquelle. Hier steht nur die
   Groesse.

   Seit 2026-09-28 steht hier Nr. 72 (logo-72-export.html), gleiche
   Form, gleiche Hoehe; data-logo="71" bleibt als Kennung.

   Die neue Datei ist 1762 zu 543 (3.245), die bisherige 1853 zu
   361 (5.133). Bei gleicher Breite waere Nr. 71 um die Haelfte
   hoeher. Im Kopf waechst sie deshalb nur leicht (Faktor 0.75
   statt 0.641 fuer gleiche Hoehe): sonst wird RECHTSANWAELTE dort
   zu klein zum Lesen, und die Leiste hat Luft. Auf den grossen Flaechen
   (Startbild, Einstieg, Fuss) steht Nr. 71 etwas groesser
   (Faktor 0.8), sonst wirkte die Marke dort geschrumpft.
   ------------------------------------------------------------ */
:root[data-logo="71"] .wordmark__logo {
  width: calc(clamp(9.5rem, 16vw, 13rem) * 0.75);
}

:root[data-logo="71"] .hero__marke {
  width: calc(var(--wp--custom--logo--breite) * 0.8);
  min-height: calc(var(--wp--custom--logo--breite) * 0.8 / 3.245);
}

:root[data-logo="71"] .hero__logo {
  width: calc(var(--wp--custom--logo--breite) * 0.8);
}

:root[data-logo="71"] .einstieg__marke {
  width: calc(clamp(16rem, 50vw, 44rem) * 0.8);
}

:root[data-logo="71"] .site-foot__marke {
  width: calc(clamp(12rem, 17vw, 15rem) * 0.8);
}

:root[data-logo="71"] .fusion-kachel__figur .fusion-podest__logo {
  width: calc(52% * 0.8);
}

@media (max-width: 44rem) {
  :root[data-logo="71"] .hero__logo,
  :root[data-logo="71"] .hero__marke {
    width: min(calc(var(--wp--custom--logo--breite) * 0.8), 100%);
  }
}

/* Solange die Leiste unten rechts steht, bekommt der Fuss unten
   Luft, sonst deckt sie am Seitenende Impressum und Datenschutz. */
body:has(> .switch) .site-foot {
  padding-bottom: 5rem;
}