/* ============================================================
   PJM Partner - Unterseiten
   ------------------------------------------------------------
   Eigene Abschnitte der sieben Unterseiten. Liegt bewusst neben
   layout.css und nicht darin: an der Startseite wird parallel
   gearbeitet, und layout.css wird beim Nachziehen des Heros neu
   zusammengesetzt. Diese Datei bleibt davon unberührt.

   Wird als LETZTE Datei geladen, nach beiden Themes. Deshalb
   reicht hier die einfache Klasse, es braucht keine :root-Ketten
   zum Übersteuern.

   Abschnitte
   1  Seitenkopf mit Übergang von der Zeichnung ins Foto
   2  Filterleiste
   3  Die Wand
   4  Der Weg weiter
   ============================================================ */

/* ------------------------------------------------------------
   1. Seitenkopf

   Halbe Höhe, kein zweiter Hero: die Startseite bleibt die
   einzige Bühne. Der Seitentitel steht im Bild unten links,
   dieselbe Stellung wie die Hero-Zeile der Fassung A.

   Den Übergang von der Zeichnung ins Foto macht dieser Abschnitt
   NICHT selbst. Dafür gibt es css/uebergang.css und
   js/uebergang.js aus der Parallel-Sitzung, und die Fassung dort
   ist die bessere: sie hat gesehen, dass Zeichnung und Foto nicht
   deckungsgleich sind - die Spirale sitzt in der Zeichnung an
   anderer Stelle - und löst das über den Umweg durch das
   Papierweiss statt über eine Überblendung, bei der man den
   Versatz sähe. Genau Martins Bild vom Entwicklerbad.

   Der Seitenkopf ist deshalb nur der Wirt: Höhe, Träger für die
   Schrift, Textstand. Die Bildebenen gehören dem Modul. Die
   Figur trägt data-uebergang, das Modul findet den Rest über
   data-bildwelt.
   ------------------------------------------------------------ */
/* Der Kopf richtet seine Höhe nach dem Bild, nicht umgekehrt.
   Umgestellt am 2026-08-03: vorher stand hier eine feste Höhe
   (clamp 19rem bis 31rem), und object-fit: cover schnitt vom Motiv
   ab, was nicht hineinpasste. Beim Nordsternhaus fielen so die
   Fassadenränder und Teile des Schriftzugs heraus.

   Das Verhältnis ist 2400 / 1018 und nicht 21 / 9. Die Bänder sind
   2,357:1, das Kürzel "21:9" meint 2,333:1 - die Differenz ist rund
   ein Prozent, und genau um dieses Prozent würde cover wieder
   schneiden. Steht hier das Maß der Datei, schneidet es nichts.

   cover bleibt trotzdem stehen (Regel unten): bei passendem
   Verhältnis tut es nichts, und es ist der sichere Rückfall, falls
   ein Band einmal abweicht. contain wäre falsch - das gäbe leere
   Streifen. */
.seitenkopf {
  position: relative;
  display: grid;
  align-content: end;
  /* Flaches Band statt des Seitenverhaeltnisses der Bilddatei -
     Kundenwunsch 2026-08-31: die Titelbaender sollen ueberall
     deutlich schmaler laufen. Untergrenze statt Fixhoehe: wo nur
     Eyebrow und Titel stehen, bleibt das Band flach; wo ein
     laengerer Vorspann steht (Arbeitsrecht), waechst es genau so
     weit mit, dass nichts beschnitten wird. Das Motiv wird per
     object-fit beschnitten und traegt in jeder Hoehe. */
  min-height: clamp(15rem, 22vw, 19rem);
  overflow: hidden;
  background: var(--wp--preset--color--ink-deep);
}

/* ---------- Titel unter dem Bild statt darin ----------
   Neu am 2026-09-10 fuer die Kanzlei-Seite, Martins Wunsch: den
   Schriftblock "aus dem Bereich des Fotos rausnehmen".

   Zwei Teile: das Band traegt nur noch das Bild (--nurbild), der
   Titel steht als eigener Block darunter (.seitenkopf-titel).

   Zur Hoehe: .seitenkopf steht auf align-content: end und waechst
   sonst mit seinem Text. Ohne Text bleibt die Untergrenze uebrig,
   und die ist bei clamp(15rem, 22vw, 19rem) ein ordentliches Band -
   das Bild braucht keine eigene Hoehenangabe. */
.seitenkopf--nurbild {
  /* Etwas hoeher als das textlose Minimum, damit die Fassade nicht
     zum Streifen wird: ohne Schrift darin darf das Bild mehr Raum
     nehmen, es ist jetzt das einzige, was das Band zu zeigen hat. */
  min-height: clamp(17rem, 26vw, 23rem);
}

.seitenkopf-titel {
  /* Unten etwas Luft seit dem 2026-09-15: auf Karriere folgt direkt
     eine getoente Flaeche, auf den Rechtsgebieten die Sprungleiste -
     beide sassen sonst ohne Abstand unter dem Vorspann. */
  padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}

/* Dunkel auf hell. Im Band stand dieselbe Schrift weiss auf dem
   abgedunkelten Foto; hier waere das unlesbar. Die Werte sind die
   der uebrigen Seitenueberschriften, nicht eigene. */
.seitenkopf-titel .display {
  margin: 0;
  color: var(--wp--preset--color--ink-deep);
}

/* Eyebrow in derselben Akzent-Textfarbe wie auf dem Kopf ohne Bild -
   auf Weiss gemessen, das reine Orange käme nicht über 3,1 zu 1. */
.seitenkopf-titel .eyebrow { color: var(--wp--preset--color--accent-text); }

.seitenkopf-titel .lead {
  margin: var(--wp--preset--spacing--40) 0 0;
  max-width: 36rem;
  color: var(--wp--preset--color--muted);
}

/* Der Beitrags-Kopf, seit dem 2026-09-03 flacher als die uebrigen
   Baender: die Kanzlei will das Bild "von vornherein nur in einer
   Hoehe von circa 4-5 cm" (Mail von Dr. Uhlmannsiek vom 2026-09-01),
   damit der Text sofort im Blick ist. 10 bis 12rem sind bei 16px
   Grundschrift 160 bis 192 Pixel, also rund 4,2 bis 5 Zentimeter am
   Schreibtisch. Eyebrow und Titel passen hinein; wo nicht, waechst
   der Kopf wie ueberall ueber die Untergrenze hinaus. */
.seitenkopf--beitrag {
  min-height: clamp(10rem, 14vw, 12rem);
}

/* Dazu weniger Luft ueber und unter der Schrift, dieselben Werte wie
   beim schmalen Kopf (.seitenkopf--schmal): sonst hebt der Inhalt
   das Band trotz kleinerer Untergrenze wieder auf gut 220 Pixel. */
.seitenkopf--beitrag .seitenkopf__text {
  padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.seitenkopf__figur {
  position: absolute;
  inset: 0;
  margin: 0;
}

.seitenkopf__figur img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gebietsmotive mit Moebeln auf dem Boden, seit dem 2026-10-01. Das
   Band beschneidet die 21:9-Bilder oben und unten; mittig gesetzt
   fielen die Stuhlbeine heraus (Hinweis aus dem Call vom 01.10. zu
   Familien- und Erbrecht). 70 Prozent zeigt den Boden und laesst oben
   genug Wand. Nicht gesetzt bei Insolvenz (Tuer) und Versicherung
   (Schirm): dort sitzt das Motiv mittig. */
.seitenkopf__figur img.titelbild--boden { object-position: 50% 70%; }

/* Insolvenz: die Tuer reicht fast bis an die Oberkante des Bildes,
   der Ausschnitt beginnt deshalb ganz oben (seit dem 2026-10-02). */
.seitenkopf__figur img.titelbild--oben { object-position: 50% 0%; }

/* Gebietsseiten am grossen Schirm, seit dem 2026-10-02 (Mail von
   Dr. Uhlmannsiek vom 02.10.): Schirm, Leiter, Garderobe und Tuer
   wurden oben und unten abgeschnitten. Ursache war die feste
   Obergrenze von 23rem - je breiter der Schirm, desto kleiner der
   sichtbare Teil der 21:9-Motive (bei 1920 Pixeln nur 45 Prozent
   der Bildhoehe). Jetzt waechst das Band mit der Breite im
   Verhaeltnis 3:1, sichtbar bleiben immer rund 78 Prozent der
   Bildhoehe. Gemessen ueber alle zwoelf Motive: jedes Moebel liegt
   mit Rand im Ausschnitt. Telefon und Tablet (bis 48rem) behalten
   ihre flache Hoehe aus der Regel weiter unten. */
@media (min-width: 48.0625rem) {
  .seitenkopf.seitenkopf--gebiet {
    aspect-ratio: 3 / 1;
    max-height: 78vh;
  }
}

/* Ohne Skript ist das Foto der richtige Zustand: es ist die
   Sache selbst, die Zeichnung ist eine Darstellung davon. Das
   Modul dreht das um, sobald es baut - seine Regeln stehen in der
   Spezifität über diesen hier. */
.seitenkopf__figur img[data-bildwelt="popart"] { opacity: 0; }

/* Der Träger für die Schrift. Unten dicht genug, dass Weiß über
   jedem der fünf Titelbilder trägt, oben restlos offen, damit das
   Motiv nicht zugedeckt wird. Liegt ausdrücklich ÜBER der
   Übergangs-Schicht, so wie das Modul es vorsieht. */
.seitenkopf__figur::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;

  /* Zwei Achsen, nicht eine. Der Grund steht in der Zeichnung: sie
     ist über weite Strecken fast weiss, und ein reiner Verlauf von
     unten müsste so dicht werden, dass er das Motiv erschlägt.
     Die zweite Achse von links nimmt genau dort Licht weg, wo die
     Schrift steht, und lässt die rechte Bildhälfte offen. */
  background:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--wp--preset--color--ink-deep) 62%, transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--ink-deep) 30%, transparent) 45%,
      transparent 76%
    ),
    /* Aufgehellt am 2026-08-03, Operator-Entscheid "behutsam".
       Die Bänder wirkten düster, und die Ursache lag hier und nicht
       in den Bildern.

       Geändert wurde nur diese senkrechte Achse, und zwar an allen
       vier Haltepunkten im selben Verhältnis (Faktor rund 0,89):
       88 auf 78, 76 auf 66, 32 auf 28, 6 auf 5.

       Warum nicht nur der unterste Wert: 88 auf 78 allein hätte den
       Abstand zum nächsten Halt (76) fast aufgehoben. Die untere
       Bildhälfte wäre dann gleichmässig dunkel statt abgestuft -
       heller in der Zahl, flacher im Ergebnis, insgesamt schlechter.

       Die waagerechte Achse darüber ist unangetastet. Sie nimmt das
       Licht dort weg, wo die Schrift steht, und ist der Grund, warum
       Weiss auf allen Bändern trägt.

       Nachgemessen am 2026-08-03 über allen sechs Motiven, jeweils
       der schlechteste Punkt im Schriftbereich, Weiss gegen das aus
       Bild und beiden Achsen zusammengerechnete Band:

         Über uns, Treppenhaus       13,9:1
         Beitrag, Bauhelm            12,7:1
         Anwälte, Blick nach unten   12,4:1
         Kontakt, Nordsternhaus      12,1:1
         Profile, Aufblick-Detail    11,7:1
         Karriere, Blaue Fenster      9,3:1

       Gefordert sind 4,5:1. Es ist also noch Luft nach oben; wer
       weiter aufhellt, misst neu - das Band mit den blauen Fenstern
       ist das knappste und die Stelle, an der es zuerst eng wird. */
    linear-gradient(
      to top,
      color-mix(in srgb, var(--wp--preset--color--ink-deep) 78%, transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--ink-deep) 66%, transparent) 42%,
      color-mix(in srgb, var(--wp--preset--color--ink-deep) 28%, transparent) 70%,
      color-mix(in srgb, var(--wp--preset--color--ink-deep) 5%, transparent) 100%
    );
}

.seitenkopf__text {
  position: relative;
  z-index: 3;
  padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--base);
}

.seitenkopf .display {
  margin: 0;
  color: var(--wp--preset--color--base);
}

/* Die Eyebrow steht hier weiss, nicht im Akzent. Gemessen: über
   der hellen Zeichnung käme das Orange auf 3,1 zu 1 und damit
   unter die Schwelle - der Träger müsste dafür auf 96 Prozent
   Deckung, und dann wäre vom Motiv nichts mehr übrig. Die
   Akzentfarbe bleibt trotzdem im Bild: die Zierlinie unter dem
   Wort trägt sie, und eine Linie ist kein Text. */
.seitenkopf .eyebrow { color: var(--wp--preset--color--base); }

.seitenkopf .lead {
  margin: var(--wp--preset--spacing--40) 0 0;
  max-width: 36rem;
  color: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
}

/* Die schmale Fassung, für Seiten, die ihren Titel nicht im Bild
   tragen. Das ist heute die Profilseite: dort steigt die Seite
   über die Person ein, nicht über das Haus, und der Name gehört
   ans Portrait und nicht in den Himmel darüber. Der Kopf hält
   dann nur die Bildwelt und den Weg zurück.

   Diese Fassung nimmt das Verhältnis 2400/1018 ausdrücklich zurück.
   Sie ist ein Streifen und soll einer bleiben: bei 1440 Pixern wäre
   der Kopf sonst 611 statt 256 Pixel hoch, und der Name der Person
   stünde erst nach einem halben Bildschirm Himmel. Hier schneidet
   cover weiter - gewollt, denn hier trägt nicht das Motiv, sondern
   das Portrait darunter. */
.seitenkopf--schmal {
  aspect-ratio: auto;
  min-height: clamp(10rem, calc(var(--wp--custom--vh) * 28), 16rem);
}

.seitenkopf--schmal .seitenkopf__text {
  padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.seitenkopf__zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--base);
  text-decoration: none;
  border-bottom: var(--wp--custom--rule--width) solid transparent;
  transition: border-color var(--wp--custom--transition--state);
}

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

.seitenkopf__zurueck .arrow {
  color: var(--wp--preset--color--accent);
  transition: transform var(--wp--custom--transition--state);
}

.seitenkopf__zurueck:hover .arrow { transform: translateX(-0.2rem); }

/* Die Meta-Zeile eines Beitrags. Steht im Bild an der Stelle, an
   der sonst die Einleitung steht, und bleibt bewusst leise. */
.seitenkopf__meta {
  margin: var(--wp--preset--spacing--30) 0 0;
  font-size: var(--wp--preset--font-size--sm);
  color: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
}

/* Dieselbe Zeile, aber unter dem Band. Seit dem 2026-09-02 stehen
   Datum und Autorenschaft als erste Zeile des Beitrags und nicht
   mehr im Titelband: mit der Zeile lief der Kopf von beitrag.html
   über die flache Bandhöhe der übrigen Unterseiten hinaus, und der
   flache Start ist Kundenwunsch (Mail vom 2026-09-01).

   Eine eigene Regel und nicht .seitenkopf__meta: deren Farbe ist
   Weiß auf dem dunklen Band und wäre auf dem hellen Papier
   unsichtbar. Sonst dieselbe Geste - kleiner als der Fließtext
   und leiser in der Farbe. */
.beitrag-meta {
  margin: 0 0 var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
}

/* ------------------------------------------------------------
   Der Seitenkopf ohne Bild, neu am 2026-08-28.

   Kundenwunsch aus der Mail vom 2026-08-28: über den Profilseiten
   fällt das Titelband weg. Zurück bleibt der Weg auf die
   Anwaltswand - und der braucht kein Band, sondern eine Leiste.

   Was der Kopf dafür ablegt, hing alles am Bild: das
   Seitenverhältnis hielt dessen Höhe frei, die dunkle Fläche war
   sein Grund, die weiße Schrift die Antwort darauf. Übrig bleibt
   eine Zeile in Tinte unter dem hellen Seitenkopf, in der Flucht
   der Wortmarke darüber.

   Keine eigene Trennlinie: die Kopfleiste bringt schon eine mit
   (layout.css, .site-head). Zwei Striche im Abstand einer Zeile
   wären ein Gitter und kein Rahmen.

   Doppelt qualifiziert, weil weiter unten zwei Medienabfragen dem
   .seitenkopf eine Mindesthöhe für schmale Schirme geben. Bei
   gleicher Spezifität gewönne die spätere Regel; hier soll aber
   der Sonderfall gewinnen, gleich an welcher Stelle der Datei er
   steht.
   ------------------------------------------------------------ */
.seitenkopf.seitenkopf--ohne-bild {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  background: transparent;
}

.seitenkopf--ohne-bild .seitenkopf__text {
  padding-block: var(--wp--preset--spacing--40) 0;
  color: var(--wp--preset--color--ink);
}

.seitenkopf--ohne-bild .seitenkopf__zurueck { color: var(--wp--preset--color--ink); }

/* Seit dem 2026-08-31 tragen auch Titel-Seiten (Anwaelte, Aktuelles)
   den Kopf ohne Bild. Titel, Eyebrow und Vorspann stehen oben hart
   auf Weiss (fuer den Stand ueber dem Titelband gemessen) - ohne
   Band brauchen sie die Farben des weissen Grunds. */
.seitenkopf--ohne-bild .display { color: var(--wp--preset--color--ink); }
.seitenkopf--ohne-bild .eyebrow { color: var(--wp--preset--color--accent-text); }
.seitenkopf--ohne-bild .lead { color: var(--wp--preset--color--muted); }

/* Ohne Band beginnt die Person unmittelbar unter der Leiste. Die
   sechs Rem Anlauf des Profils waren der Abstand zum Foto darüber
   (2026-08-24, Wunsch aus dem Call vom 2026-08-22) - ohne Foto
   sind sie ein Loch. */
.seitenkopf--ohne-bild + .profil { padding-top: var(--wp--preset--spacing--50); }

/* ------------------------------------------------------------
   Kein Überzug mehr auf den Titelbildern, seit dem 2026-09-15.

   Hier stand das Milchglas-Blatt der hellen Fassung (weichgezeichnet,
   aufgehellt, von unten links ins Bild). Die Kanzlei fand die
   "milchigen unteren Teile der Fotos" nicht gut (Mail Dr. Uhlmannsiek).
   Ohne das Blatt trägt Schrift auf den hellen Bändern nicht - der
   dunkle Träger allein fiel beim Vorspann auf allen sechs Bändern
   durch (Messung vom 2026-08-03). Deshalb steht der Titel jetzt auf
   allen Unterseiten UNTER dem Bild (.seitenkopf-titel, oben), wie
   seit dem 2026-09-10 auf der Kanzlei-Seite.

   Ein Band ohne Text braucht auch den dunklen Träger nicht: er würde
   das Foto nur abtönen. Beide Pseudo-Elemente treten ab.
   ------------------------------------------------------------ */
.seitenkopf--nurbild .seitenkopf__figur::before,
.seitenkopf--nurbild .seitenkopf__figur::after,
.seitenkopf--beitrag .seitenkopf__figur::after {
  display: none;
}

/* Beitragsbilder der alten PJM-Seite, seit dem 2026-09-23: viele
   zeigen Menschen im Hoch- oder Querformat, und das flache Band
   schnitt mittig durch Brust und Hals. Der Ausschnitt sitzt deshalb
   im oberen Drittel, wo auf solchen Fotos die Gesichter liegen. */
.seitenkopf--beitrag .seitenkopf__figur img { object-position: 50% 28%; }

/* ------------------------------------------------------------
   Profil einer Person

   Die Vorfassung stellte das Portrait in eine breite Querformat-
   Fläche und füllte die Ränder mit einer unscharfen Kopie
   desselben Bildes. Bei einem hochformatigen Portrait blieb davon
   ein kleines Bild in der Mitte und viel Unschärfe drumherum.

   Jetzt dasselbe Format wie auf der Wand: Hochformat 4:5, fester
   Ausschnitt, Text daneben. Damit sieht die Person hier aus wie
   ihre Kachel in der Übersicht, und der Weg von dort hierher
   bleibt sichtbar. Die Akzentlinie unter dem Bild ist dieselbe
   Geste wie an den Kacheln und an den Filterknöpfen.
   ------------------------------------------------------------ */
/* Oben eine Stufe mehr Luft seit dem 2026-08-24: Martin wollte
   im Call vom 2026-08-22 "den Abstand zwischen dem Foto oben mit
   dem Treppenhaus und dem Anwalt ein bisschen vergroessern". */
.profil {
  padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--70);
}

.profil__raster {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.profil__bild {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--wp--preset--color--surface);
  border-bottom: 2px solid var(--wp--preset--color--accent);
}

.profil__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
}

.profil__text .display { margin: 0; }

.profil__text .person__badge { margin-top: var(--wp--preset--spacing--20); }

/* Ein Hauch mehr Luft zwischen den Marken und dem ersten Absatz,
   seit dem 2026-08-28. Kundenwunsch aus der Mail vom 2026-08-28:
   der Abstand unter dem Namen darf etwas größer sein. Die nächste
   Stufe der Leiter (2,5rem) wäre mit dem halben Rem, den die Marken
   schon nach unten abgeben, ein Loch gewesen - deshalb genau eine
   halbe Stufe mehr statt einer ganzen. */
.profil__text .prose {
  margin-top: calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--20));
}

.profil__text .contact-list { margin-top: var(--wp--preset--spacing--50); }

/* Der Direktweg per E-Mail auf den Profilseiten, ergaenzt am
   2026-08-02. Er steht zwischen Fliesstext und Kontaktliste, weil
   er die Handlung ist und die Liste nur die Auskunft: wer hier
   ankommt, will schreiben und nicht nachschlagen.

   Mehrere Fachanwaltstitel stehen nebeneinander und brauchen
   deshalb eigenen Abstand in BEIDE Richtungen - bei einem
   einzigen Titel fiel das nicht auf. Stefan Palaschinski traegt
   vier, die brechen auf zwei Zeilen um: ohne Abstand nach unten
   klebten die Zeilen aneinander, ohne Abstand nach rechts die
   Marken innerhalb einer Zeile.

   Der Abstand sitzt rechts und unten an jeder Marke statt links
   an den folgenden. Beim Umbruch faellt ein linker Abstand am
   Zeilenanfang weg und die zweite Zeile stuende versetzt.

   Seit dem 2026-09-18 bricht keine Marke mehr in sich um. Bei Oliver
   Ridder (vier Marken) lief "Fachanwalt fuer Familienrecht" ueber das
   Zeilenende, und die Akzentlinie oben stand dann auf zwei halben
   Stuecken. inline-block haelt jede Marke als Ganzes zusammen. Die
   Abstaende oben und unten, die als inline nie griffen, sind dabei
   auf null gesetzt: gemessen bleibt die Zeilenfolge bis auf einen
   Pixel die bisherige. */
.profil__text .person__badge {
  display: inline-block;
  margin-top: 0;
  margin-right: var(--wp--preset--spacing--30);
  margin-bottom: 0;
}

/* Aus einem Knopf werden zwei, ergaenzt am 2026-08-03. Schreiben und
   Anrufen stehen nebeneinander, weil beide Wege gleich gemeint sind:
   der eine fuer den, der formulieren will, der andere fuer den, der
   eine Frage hat. Der Umbruch ist erlaubt - am Telefon stehen sie
   untereinander und bleiben beide voll treffbar. */
.profil__aktion {
  margin: var(--wp--preset--spacing--40) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
}

/* Die Profile bei XING und LinkedIn. Bis heute standen sie als
   Klartext da ("XING: Martin_Moebius5") und waren damit eine Auskunft,
   die niemand abtippt. Jetzt sind es Wege.

   Einfarbig in der Hausfarbe und nicht in Markenblau: die Marken
   gehoeren nicht der Kanzlei, und zwei fremde Firmenfarben in einem
   Profilkopf zerreissen die Seite. Beide Markenrichtlinien lassen die
   einfarbige Verwendung ausdruecklich zu.

   Nicht jeder hat beide Profile, mancher gar keins. Wer keins hat,
   bekommt die Leiste nicht - kein leerer Rahmen, kein Platzhalter. */
.profil__profile {
  margin: var(--wp--preset--spacing--40) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--wp--preset--spacing--20);
}

.profil__profil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--wp--custom--rule--strong);
  border-radius: 50%;
  color: var(--wp--preset--color--muted);
  transition:
    color var(--wp--custom--transition--state),
    border-color var(--wp--custom--transition--state),
    background-color var(--wp--custom--transition--state);
}

.profil__profil svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.profil__profil:hover,
.profil__profil:focus-visible {
  color: var(--wp--preset--color--base);
  background-color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}

/* Portrait und Motto in einer Spalte, seit dem 2026-08-24. Der
   Wrapper existiert, weil Figur und Zitat sonst zwei Grid-Kinder
   waeren und das Zitat unter die GANZE erste Zeile fiele statt
   unter das Bild. Das Motto selbst behaelt seine Regeln von unten
   (.motto), nur der Anschluss ans Bild kommt dazu. */
.profil__seite { min-width: 0; }

/* Doppelt qualifiziert, weil die Grundregel .motto { margin: 0 }
   weiter unten in der Datei steht und sonst gewinnt.

   Eine Stufe mehr Abstand zum Portrait seit dem 2026-08-28,
   Kundenwunsch aus der Mail vom 2026-08-28. */
.profil__seite .motto--profil { margin-top: var(--wp--preset--spacing--50); }

/* Das Anführungszeichen über dem Motto, neu am 2026-08-28.

   Kundenwunsch aus der Mail vom 2026-08-28: der Satz soll als
   Zitat zu erkennen sein, so wie im bisherigen Internetauftritt.
   Gesetzt ist das deutsche öffnende Anführungszeichen (U+201E),
   nicht der englische Zoll-Strich und kein Bildzeichen.

   Es steht als eigene Zeile ÜBER dem Satz und nicht davor: vor
   dem Satz geschoben würde es die erste Zeile einrücken und die
   Fluchtlinie zur Akzentlinie links brechen. So bleibt der Satz
   in der Flucht und bekommt trotzdem seine Marke.

   Die Farbe ist accent-text und nicht der reine Akzent. Derselbe
   Grund wie an .massstab__zahl und .filter__zahl: der reine Akzent
   kommt auf hellem Grund nicht über 3,1 zu 1, und ein Schriftzeichen
   ist kein Strich. Die gedeckte Fassung hält in beiden Farbwelten
   rund 4,9 und ist erkennbar dieselbe Farbe.

   Der negative Rand unten holt die Grundlinien-Luft des Zeichens
   zurück - das tiefgestellte Anführungszeichen sitzt an der
   Grundlinie, unter ihm steht sonst eine halbe leere Zeile und der
   Satz stünde weiter weg von seiner eigenen Marke als vom Bild. */
.profil__seite .motto--profil::before {
  content: "„";
  display: block;
  font-family: var(--wp--preset--font-family--titel);
  /* Am 2026-09-16 von 3,6 auf 2,2 zurueckgenommen. Kais zweiter
     Einwand galt der Groesse: "zu gross und steht allein". Martin
     behaelt das Zeichen am Anfang, also bleibt es - aber in einer
     Groesse, in der es den Satz anfuehrt statt ihn zu ueberragen.
     Seit der Strich links weg ist, traegt es ohnehin mehr Gewicht
     und braucht weniger Flaeche dafuer. */
  font-size: calc(var(--wp--preset--font-size--xl) * 2.2);
  /* Das tiefgestellte Zeichen traegt seine Tinte unterhalb der
     Grundlinie. Die kurze Zeilenbox laesst genau diese Tinte als
     sichtbares Zeichen stehen, der Rand darunter haelt den Satz
     auf Abstand statt ihn zu ueberlappen. */
  line-height: 0.45;
  margin-bottom: 0.3em;
  color: var(--wp--preset--color--accent-text);
}

@media (max-width: 52rem) {
  .profil__raster { grid-template-columns: minmax(0, 1fr); }
  .profil__bild { max-width: 17rem; }
  .profil__seite .motto--profil { max-width: 28rem; }
}

/* ============================================================
   Juristische Laufbahn, neu am 2026-08-03.

   Die Sektion hiess bis heute "Vita" und trug gekuerzte
   Eigenformulierungen ("Partner der Kanzlei in Hamburg"). Jetzt
   steht dort der Wortlaut der Quelle, und der bringt eine
   Jahresspalte mit.

   Zwei Faelle, weil die Quellen zwei Faelle kennen. Bei fuenf
   Personen steht zu jeder Station ein Zeitraum; der fuehrt links
   in eigener Spalte, damit das Auge die Jahre abwaerts lesen kann
   ohne den Text zu queren. Bei Moebius und Weinrich nennt die
   Quelle KEINE Jahreszahl - dort faellt die Spalte weg statt sich
   mit Platzhaltern zu fuellen. Eine leere Jahresspalte saehe aus
   wie ein Fehler; das Fehlen ist aber die Wahrheit.
   ============================================================ */
.laufbahn {
  margin: 0;
  border-top: var(--wp--custom--rule--soft);
}

.laufbahn__station {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--wp--preset--spacing--30);
  padding-block: var(--wp--preset--spacing--30);
  border-bottom: var(--wp--custom--rule--soft);
}

.laufbahn__zeit {
  margin: 0;
  font-family: var(--wp--preset--font-family--titel);
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--accent);
  font-variant-numeric: tabular-nums;
}

.laufbahn__ort {
  margin: 0;
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.55;
}

/* Ohne Jahreszahlen: eine Spalte, und die Station bekommt die
   Aufzaehlungs-Geste der uebrigen Listen zurueck. */
.laufbahn--ohne-jahr .laufbahn__station { grid-template-columns: minmax(0, 1fr); }

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

/* ============================================================
   Das Motto. Jeder der sieben PJM-Anwaelte hat eines, teils mit
   Urheber, teils ohne. Es ist der persoenlichste Satz der ganzen
   Seite und stand bisher nirgends.

   Bewusst ohne Anfuehrungszeichen im Text: die Auszeichnung
   uebernimmt die Schrift und die Linie. Ein blockquote traegt die
   Herkunft, cite den Urheber - da wo es einen gibt.
   ============================================================ */
/* Ohne Strich links seit dem 2026-09-16. Kai Surmann hatte die Wahl
   gestellt - "komplett eingerahmt, oder der einzelne Strich weg" -,
   Martin Moebius hat entschieden: "Dann eher der Strich weg."

   Die Entscheidung passt zum Haus: Rahmen und Rundungen wurden im
   Rundschreiben ausdruecklich kritisiert (K7), ein Kasten um das
   Zitat waere gegen dieselbe Kritik gelaufen. Ohne Strich faellt
   auch der Einzug weg, und der Satz steht in einer Flucht mit dem
   Portrait darueber. Das Anfuehrungszeichen traegt die Marke jetzt
   allein - dafuer steht es. */
.motto {
  margin: 0;
}

.motto__satz {
  margin: 0;
  font-family: var(--wp--preset--font-family--titel);
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.35;
  text-wrap: balance;
}

.motto__urheber {
  display: block;
  margin-top: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  font-style: normal;
}

/* ============================================================
   Die zweispaltige Nutzenliste, neu am 2026-08-28.

   Die Kanzlei hat in der Mail vom 2026-08-28 auf die leere rechte
   Hälfte neben "Sie profitieren von" gezeigt. Acht kurze Zeilen
   untereinander lassen über die halbe Seitenbreite nichts stehen -
   in zwei Spalten füllt dieselbe Liste die Fläche, ohne dass ein
   Wort dazukommt oder das Seitengefüge sich ändert.

   Ein Zusatz zu .list aus layout.css, nicht dessen Änderung: die
   Grundliste bleibt, wie sie überall im Haus steht, und diese Datei
   lädt nach layout.css. Wer den Vorschlag zurücknimmt, löscht die
   eine Klasse im Markup und diesen Block - sonst nichts.

   Dieselbe Rezeptur wie beim Branchenspiegel darunter: columns mit
   Mindestbreite statt fester Spaltenzahl. Unterschreitet die Spalte
   die 20rem, steht die Liste von selbst wieder einspaltig - am
   Telefon also immer.
   ============================================================ */
.list--zweispaltig {
  columns: 2 20rem;
  column-gap: var(--wp--preset--spacing--50);
}

/* Kein Punkt bricht über die Spaltengrenze. Ein Eintrag, dessen
   zweite Zeile oben in der Nachbarspalte weiterläuft, liest sich
   als zwei Einträge. */
.list--zweispaltig > li { break-inside: avoid; }

/* ============================================================
   Der Branchenspiegel. Nur Philipp-Alexander Wagner hat ihn,
   36 Eintraege lang. Als Liste untereinander waere er eine Wand;
   in Spalten ist er das, was er sein soll - ein Beleg fuer Breite,
   den man ueberfliegt und nicht liest.
   ============================================================ */
.branchen {
  columns: 3 16rem;
  column-gap: var(--wp--preset--spacing--50);
  margin: 0;
  padding: 0;
  list-style: none;
}

.branchen > li {
  break-inside: avoid;
  padding-block: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.5;
  color: var(--wp--preset--color--muted);
}

/* Der Halter der Wand. Oben kein Abstand, den bringt die Wand
   selbst mit, unten die volle Sektionsluft vor dem Kontaktband. */
.wand-halter {
  padding-block: 0 var(--wp--preset--spacing--70);
}

/* Die Assistenz-Wand traegt seit dem 2026-09-16 eine eigene Flaeche und
   braucht deshalb oben ein Polster. Ohne eines begann der Farbwechsel
   unmittelbar an der Zeile TEAM - solange beide Waende auf demselben
   Weiss standen, fiel die fehlende Luft nicht auf, mit der Flaeche wirkt
   der Block gequetscht.

   Derselbe Wert wie unten (spacing--70), damit die Flaeche oben und
   unten gleich viel Luft haelt und nicht als angeschnittener Streifen
   liest. */
.wand-halter--assistenz.section--surface {
  padding-top: var(--wp--preset--spacing--70);
}

/* ------------------------------------------------------------
   2. Filterleiste

   Zwölf Rechtsgebiete stehen im Haus, die Leiste zeigt nur die
   besetzten: ein Filter, der ins Leere führt, ist eine Sackgasse
   mit Beschriftung.

   Jeder Knopf trägt das Zeichen seines Gebiets aus der eigenen
   Motivsprache. Damit sieht die Leiste nach diesem Haus aus und
   nicht nach einem Bedienelement von der Stange.

   Ohne Skript bleibt die Leiste verborgen (Attribut hidden am
   Element) und die Wand steht vollständig da. Tote Knöpfe wären
   schlechter als keine.
   ------------------------------------------------------------ */
.filterleiste {
  padding-block: var(--wp--preset--spacing--60) 0;
}

/* Das Klappfeld um die Filterleiste, neu am 2026-08-31. Zu die
   Vorgabe: die Wand zeigt alle, der Filter oeffnet auf Klick.
   Der Pfeil ist derselbe Winkel wie an der Sprachwahl und dreht
   im offenen Zustand - das Feld sagt damit selbst, was es tut. */
.filterleiste__auf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  list-style: none;
}

.filterleiste__auf::-webkit-details-marker { display: none; }

.filterleiste__auf .eyebrow { margin-bottom: 0; }

.filterleiste__auf::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.35rem;
  border-right: 1.5px solid var(--wp--preset--color--accent-text);
  border-bottom: 1.5px solid var(--wp--preset--color--accent-text);
  transform: rotate(45deg);
  transition: transform var(--wp--custom--transition--state);
}

.filterleiste__klapp[open] .filterleiste__auf::after {
  transform: rotate(225deg);
  margin-top: 0.15rem;
}

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

.filterleiste__kopf .eyebrow { margin-bottom: 0; }

.filterleiste__ergebnis {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
}

/* Drei gleich breite Spalten ueber die volle Satzbreite -
   Kundenwunsch 2026-08-31 (zweite Runde): flacher stapeln,
   lieber in die Breite. Elf Knoepfe ergeben so vier Zeilen;
   drei Zeilen braeuchten vier Spalten, und dann braeche die
   laengste Beschriftung (Prozesse, Schiedsverfahren &
   Mediation) um. Alle Knoepfe fuellen ihre Spalte und stehen
   an einer Linie. Unter 60rem zwei Spalten, unter 40rem eine. */
.filterleiste__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--20);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.filterleiste__liste .filter {
  display: flex;
  width: 100%;
}


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

.filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: var(--wp--custom--rule--soft);
  border-radius: var(--wp--custom--radius--none);
  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--sm);
  font-weight: var(--wp--custom--weight--body);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--wp--custom--transition--state),
    border-color var(--wp--custom--transition--state),
    color var(--wp--custom--transition--state);
}

/* Der einzige farbige Strich der Leiste. Er wächst von links und
   markiert die Wahl, ohne eine zweite Fläche aufzumachen. Martins
   Vorgabe aus dem Call: Akzent setzen, nicht knallen. */
.filter::after {
  content: "";
  position: absolute;
  inset-inline: -1px;
  bottom: -1px;
  height: 2px;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--wp--custom--transition--state);
}

.filter:hover {
  border-color: color-mix(in srgb, var(--wp--preset--color--ink) 34%, transparent);
  background: var(--wp--preset--color--surface);
}

.filter:hover::after { transform: scaleX(1); }

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

.filter[aria-pressed="true"]::after { transform: scaleX(1); }

.filter__zeichen {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.filter[aria-pressed="true"] .filter__zeichen { opacity: 1; }

.filter__zahl {
  font-size: var(--wp--preset--font-size--xs);
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--accent-text);
}

.filter[aria-pressed="true"] .filter__zahl { color: var(--wp--preset--color--accent); }

/* ------------------------------------------------------------
   3. Die Wand

   Bis zum 2026-08-24 stand hier eine Haarfuge in Marineblau -
   der Grund der Wand schien durch und ergab ein feines Netz.
   Martin hat im Call vom 2026-08-22 entschieden: wie auf der
   Startseite, weisse Fugen mit etwas Luft ("wie auf der ersten
   Seite, so ein bisschen Platz zwischen den einzelnen Bildern").
   Die Wand traegt deshalb jetzt denselben Abstand wie
   .team__wall--luft (layout.css, Abschnitt 18) und keinen
   eigenen Grund mehr.

   Die offene Fuge vertraegt sich weiter mit dem Filter: bei
   jedem Filter endet die letzte Reihe woanders, und bei einer
   Fuge ist das einfach das Ende der Reihe, kein Loch.

   Hochformat 4:5 statt des Quadrats der Startseite. Portraits
   stehen darin ruhiger, und die Seite wird so als eigener Ort
   erkennbar, ohne die Bildsprache zu verlassen.

   Vier Spalten: elf Personen und der Weg weiter sind zwölf
   Felder, und zwölf geht ohne Rest durch 4, 3 und 2.
   ------------------------------------------------------------ */
.wand {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30);
  margin: var(--wp--preset--spacing--50) 0 0;
  padding: 0;
  list-style: none;
}

.wand__feld {
  min-width: 0;
  background: var(--wp--preset--color--base);
}

.wand__feld[hidden] { display: none; }

/* ------------------------------------------------------------
   Assistenz-Wand, neu am 2026-08-31.

   Dieselben Kacheln wie die Anwaltswand, aber ohne Ziel: es gibt
   keine Assistenz-Profilseiten. Die Karten stehen als a ohne
   href (nicht fokussierbar, kein Verweis), und die Zeige-Gesten
   der Anwalts-Kacheln - Zoom und Abdunkeln - unterbleiben hier,
   damit nichts Klickbarkeit verspricht, die es nicht gibt.
   ------------------------------------------------------------ */
.wand--assistenz a.karte { cursor: default; }
.wand--assistenz a.karte:hover .karte__bild,
.wand--assistenz a.karte:focus-visible .karte__bild { transform: none; }
.wand--assistenz a.karte::before { display: none; }

/* ACHTUNG, der Name .karte ist im Haus ZWEIMAL vergeben:

     a.karte    diese Personenkachel (unterseiten.css, hier)
     div.karte  die Google-Karte im Kontaktband (layout.css 2210)

   Und unterseiten.css lädt NACH layout.css. Bis zum 2026-08-03
   standen die Kachel-Regeln unqualifiziert als .karte da und
   griffen damit auch auf die Google-Karte durch. Die Folgen waren
   auf kontakt.html zu besichtigen: aspect-ratio 4/5 blies die
   Karte auf Kachelformat auf (bei voller Spaltenbreite über 1500
   Pixel hoch), und .karte::before legte eine Schicht mit inset: 0
   und z-index 1 darüber, die zwar unsichtbar ist, aber ohne
   pointer-events: none jeden Klick schluckte. Die Karte war riesig
   und tot.

   Deshalb tragen alle Kachel-Regeln jetzt a.karte. Das trennt
   sauber und ohne Umbenennung: die Kachel ist immer ein Anker
   (sie führt auf ein Profil), die Google-Karte ist immer ein div.
   Wer hier eine Regel ergänzt, qualifiziert sie mit - sonst
   greift sie wieder auf das Kontaktband durch. */
a.karte {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--base);
  text-decoration: none;
}

/* Kein Farbschleier über den Portraits. Das war auf der Start-
   seite geprüft und verworfen, und was dort gilt, gilt hier.
   Die Bilder laufen unbehandelt. */
.karte__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  transition: transform var(--wp--custom--transition--slow);
}

a.karte:hover .karte__bild,
a.karte:focus-visible .karte__bild { transform: scale(1.05); }

/* Der Träger beim Zeigen. Ohne ihn stand der Name der aufgezogenen
   Platte auf hellen Bildpartien - über einem weissen Hemd gemessen
   2,7 zu 1. Die Fläche allein über die Platte dichter zu machen,
   löst es nicht: die Platte wächst nach oben, und was unten reicht,
   ist oben zu wenig. Also nimmt diese Schicht dem ganzen Bild
   Licht, solange gezeigt wird. Im Ruhezustand ist sie unsichtbar,
   die Portraits laufen also weiter unbehandelt. */
a.karte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--wp--preset--color--ink-deep) 62%, transparent);
  opacity: 0;
  transition: opacity var(--wp--custom--transition--slow);
}

a.karte:hover::before,
a.karte:focus-visible::before { opacity: 1; }

/* Statt die Fläche beim Zeigen komplett umzuschlagen wie auf der
   Startseite, zieht die Platte hier nach oben auf. Ruhiger, und
   das Gesicht bleibt die ganze Zeit stehen. */
/* Die Dichte der Stufen ist gerechnet, nicht geschätzt. Bezug ist
   der schlechteste Fall: ein weisses Hemd direkt hinter der
   Schrift. Unten steht die Fläche fast deckend, damit die kleine
   Versalzeile im Akzent über die Schwelle kommt (gemessen 5,5 zu
   1); nach oben öffnet sie sich, damit das Portrait nicht in einem
   Balken endet. */
.karte__platte {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  /* Die Platte begann bis zum 2026-09-22 ein gutes Stueck ueber dem
     Namen und deckte fast ein Drittel des Portraits zu. Mail von Martin
     Moebius und Dr. Uhlmannsiek: "Kannst du bitte den blau eingefaerbten
     unteren Bereich auf den Fotos reduzieren, so dass dieser ein kleines
     Stueck ueber dem jeweiligen Namen endet?" Die Polsterung nach oben
     faellt dafuer von --60 auf --40; der Verlauf darunter ist derselbe,
     er sitzt nur niedriger. Die gemessene Lesbarkeit der Versalzeile
     bleibt unberuehrt, weil die Platte unten gleich dicht steht. */
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--wp--preset--color--ink-deep) 99%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--ink-deep) 94%, transparent) 40%,
    color-mix(in srgb, var(--wp--preset--color--ink-deep) 78%, transparent) 62%,
    color-mix(in srgb, var(--wp--preset--color--ink-deep) 40%, transparent) 82%,
    transparent 100%
  );
}

.karte__name {
  display: block;
  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;
}

.karte__gebiet {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  /* Seit dem 2026-09-18: Oliver Ridder meldete, dass
     "Rechtsanwaltsfachangestellte" nicht vollstaendig ins Bild passt.
     Gemessen lief das Wort am Schreibtisch 24 Pixel ueber, am Telefon
     auch "Gesellschaftsrecht" und "Versicherungsrecht". Die festen
     Trennstellen stehen als ­ im Markup von anwaelte.html; die
     beiden Zeilen hier fangen die Etiketten, die der Filter per
     Skript setzt (js/unterseiten.js, etikettiere). */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* max-height statt grid-template-rows: die Fassung mit 0fr auf 1fr
   ist eleganter, läuft aber nicht überall. Diese hier läuft.

   display:block ist hier keine Kosmetik, sondern Bedingung: an
   einem span als Inline-Element greifen weder max-height noch
   overflow. Ohne die Zeile stand die Platte 107 Pixel zu hoch,
   weil die eingeklappten Zeilen weiter Platz belegten. */
.karte__detail {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height var(--wp--custom--transition--slow),
    opacity var(--wp--custom--transition--state);
}

a.karte:hover .karte__detail,
a.karte:focus-visible .karte__detail {
  max-height: 10rem;
  opacity: 1;
}

.karte__zeile {
  display: block;
  margin-top: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.4;
  color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
}

.karte__mehr {
  display: block;
  margin-top: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--label);
  text-transform: uppercase;
}

/* Dieselbe Geste wie an den Filterknöpfen: ein Strich, der von
   links wächst. Er bindet Leiste und Wand zusammen. */
a.karte::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  height: 2px;
  background: var(--wp--preset--color--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--wp--custom--transition--slow);
}

a.karte:hover::after,
a.karte:focus-visible::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   4. Der Weg weiter

   Das zwölfte Feld. Kein Portrait, sondern der Anschluss an die
   Rechtsgebiete. Es steht nur im ungefilterten Zustand: wer
   gefiltert hat, sucht eine Person und keinen Ausgang.
   ------------------------------------------------------------ */
.weiter {
  display: flex;
  aspect-ratio: 4 / 5;
  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;
}

.weiter__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;
}

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

.weiter__pfeil {
  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);
}

.weiter:hover .weiter__pfeil,
.weiter:focus-visible .weiter__pfeil { transform: translateX(0.25rem); }

/* ------------------------------------------------------------
   Breiten
   ------------------------------------------------------------ */
@media (max-width: 74rem) {
  .wand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Schmale Schirme bekommen die alte Höhe zurück. Bei 2,357:1 wäre
   der Kopf auf einem Telefon nur rund 160 Pixel hoch - die Zeile im
   Kopf steht auf align-content: end und hätte keinen Platz. Hier
   darf cover also weiter schneiden; das Motiv vollständig zu zeigen
   ist ein Versprechen für den grossen Schirm, nicht für jeden.

   48rem sind genau die 768 Pixel aus dem Auftrag, in der Einheit,
   die dieses Haus sonst benutzt. Die Regel steht VOR der 46rem-
   Regel darunter, damit deren kleinere Höhe auf dem Telefon gewinnt;
   aspect-ratio: auto läuft dabei mit. */
/* Seit dem 2026-08-31 auch am Telefon flach (Kundenwunsch: die
   Hoehe ist ueberall begrenzt). Die Untergrenze haelt nur noch
   Platz fuer Eyebrow und Titel; laengere Vorspanne lassen das
   Band wie am grossen Schirm von selbst mitwachsen. */
@media (max-width: 48rem) {
  .seitenkopf {
    aspect-ratio: auto;
    min-height: clamp(11rem, calc(var(--wp--custom--vh) * 26), 15rem);
  }
}

@media (max-width: 46rem) {
  .wand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karte__name { font-size: var(--wp--preset--font-size--md); }
  .seitenkopf { min-height: clamp(10rem, calc(var(--wp--custom--vh) * 24), 14rem); }
}

/* Ohne Zeigegerät gibt es kein Zeigen. Dort trägt die Platte den
   Namen und das Gebiet, alles Weitere steht im Profil. */
@media (hover: none) {
  .karte__detail { display: none; }
}

/* ------------------------------------------------------------
   Bewegung respektiert die Systemeinstellung. Wer sie abbestellt
   hat, sieht sofort das Foto und keinen Übergang.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .karte__bild,
  a.karte::before,
  a.karte::after,
  .karte__detail,
  .filter::after,
  .weiter__pfeil { transition: none; }

  a.karte:hover .karte__bild { transform: none; }
}

/* ============================================================
   Karriere, neu am 2026-08-24

   Zwei Bauteile, die es im Haus noch nicht gab. Beide gehoeren
   nur der Karriereseite und stehen deshalb hier unten in einem
   Block statt verteilt zwischen den Kacheln der Anwaltswand.

   Warum ueberhaupt neu: die Seite kam bis heute mit sechs
   Platzhaltern aus und brauchte kein eigenes Bauteil. Alles
   andere auf ihr ist geliehen - Seitenkopf, Sprungleiste,
   section-head, split, list, rg-card, btn, contact-grid.
   ============================================================ */

/* Das Bildband im Abschnitt "Wie hier gearbeitet wird".

   Es ist KEIN zweiter Seitenkopf. Der Kopf oben laeuft randlos
   ueber die volle Breite und traegt Schrift im Bild; dieses Band
   steht in der Wrap-Breite, traegt keine Schrift und ist damit
   das, was es sein soll - eine Abbildung im Text, kein zweiter
   Auftritt.

   Die Hoehe ist gedeckelt und nicht aus dem Seitenverhaeltnis
   gerechnet. Das Motiv ist 2400 auf 1018; ueber die volle
   Wrap-Breite waere das Band sonst rund 500 Pixel hoch und
   draengte den Text darunter aus dem Bild. Bei clamp bleibt es
   ein Streifen, und object-fit besorgt den Zuschnitt.

   object-position auf 42 Prozent Hoehe: der Kern der Spirale
   sitzt in diesem Auszug leicht unterhalb der Mitte, und genau
   der soll im Streifen stehenbleiben.

   Die Akzentlinie unter dem Bild ist dieselbe Geste wie am
   Portrait der Profilseite und an den Kacheln der Wand. Sie ist
   der einzige farbige Strich des Abschnitts. */
.karriere-bild {
  margin: 0 0 var(--wp--preset--spacing--60);
}

.karriere-bild img {
  display: block;
  width: 100%;
  height: clamp(11rem, 26vw, 20rem);
  object-fit: cover;
  object-position: center 42%;
  border-bottom: 2px solid var(--wp--preset--color--accent);
}

.karriere-bild figcaption {
  margin-top: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.5;
  color: var(--wp--preset--color--muted);
  max-width: 42rem;
}

/* Die Handlungsleiste am Fuss der Bewerbung: schreiben oder
   anrufen, nebeneinander und gleich gemeint.

   Sie ist der Zwilling von .profil__aktion und teilt deren Regel
   bewusst NICHT. Der Name dort haengt am Profil einer Person
   (.profil__text, .profil__bild, .profil__profile); eine Klasse
   mit diesem Praefix auf der Karriereseite waere ein Verweis auf
   ein Bauteil, das hier nicht steht. Vier Zeilen doppelt sind
   billiger als ein irrefuehrender Name.

   Der Umbruch ist erlaubt: am Telefon stehen die beiden Knoepfe
   untereinander und bleiben beide voll treffbar. */
.karriere-aktion {
  margin: var(--wp--preset--spacing--40) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
}

/* ============================================================
   5. Ueber uns: Massstaebe und Bildstrecke
   ------------------------------------------------------------
   Neu am 2026-08-24, mit dem Ausbau von ueber-uns.html. Zwei
   Muster, die es im Haus noch nicht gab, und beide nur auf dieser
   einen Seite. Steht als GESCHLOSSENER Block am Ende der Datei:
   wer die Seite zurueckbaut, loescht ihn in einem Stueck, ohne
   irgendwo sonst nachsehen zu muessen.

   a) Die Massstaebe. Sechs kurze Absaetze mit Nummer, gesetzt in
      drei Spalten. Bewusst kein Akkordeon wie die Gruende auf der
      Startseite (layout.css, Abschnitt 20): dort halten fuenf
      laengere Texte die Sektion nur zugeklappt tragbar, hier sind
      es drei Zeilen je Punkt - und drei Zeilen versteckt man
      nicht hinter einem Klick.

      Getrennt wird ueber eine Linie ueber die volle Spaltenbreite
      und nicht ueber einen Kasten. Derselbe Grund wie bei den
      Gruenden: Kaesten geben der Seite den Baukasten-Eindruck
      zurueck, den die Rechtsgebiete einmal hatten.

   b) Die Bildstrecke. Der Kunde hat ein Karussell als
      Moeglichkeit genannt. Gebaut ist die Fassung, die dieses
      Haus schon einmal gewaehlt hat: die Bahn aus der Sektion
      Aktuelles (layout.css, .aktuelles__bahn). Sie laeuft
      waagerecht ueber, rastet ein, wischt mit dem Daumen und
      faehrt mit den Pfeiltasten - alles ohne eine Zeile Skript.
      Kein Selbstlauf: ein Karussell, das von allein
      weiterspringt, war fuer den Hero ausdruecklich abgelehnt.

      Warum eigene Klassen und nicht die der Bahn von Aktuelles:
      dort haengen an .aktuelles__karte die Regeln der Nachrichten-
      kachel (Rahmen, Textkasten, Winkel vor dem Titel). Eine
      Bilderreihe traegt davon nichts. Die Masse der Bahn sind
      dieselben - sie sind gemessen und nicht geschaetzt, siehe
      den Kommentar an .aktuelles__bahn.
   ============================================================ */

/* ------------------------------------------------------------
   5a. Die Massstaebe
   ------------------------------------------------------------ */
.massstaebe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--50);
  margin: 0;
  padding: 0;
  list-style: none;
}

.massstab {
  padding-top: var(--wp--preset--spacing--30);
  border-top: var(--wp--custom--rule--strong);
}

/* Die Nummer ist das einzige farbige Zeichen der Sektion, in
   derselben Rolle wie die Jahresspalte der Laufbahn weiter oben:
   Akzentfarbe, Titelschrift, Ziffern auf gleicher Laufweite,
   damit 01 bis 06 untereinander fluchten.

   Sie nimmt aber accent-text und NICHT accent. Der Grund steht im
   Haus schon zweimal: der reine Akzent kommt auf hellem Grund
   nicht ueber 3,1 zu 1 (Kommentar an .seitenkopf .eyebrow), und
   fuer kleine Schrift sind 4,5 zu 1 verlangt. Gemessen auf Weiss:
   Gold #AC9268 kommt auf 2,9, Orange #F49E00 auf 2,0 - beide
   fallen durch. Die gedeckte Fassung haelt in beiden Farbwelten
   rund 4,9 und ist immer noch erkennbar dieselbe Farbe. Dieselbe
   Entscheidung wie an .filter__zahl. */
.massstab__zahl {
  display: block;
  font-family: var(--wp--preset--font-family--titel);
  font-size: var(--wp--preset--font-size--sm);
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--accent-text);
  font-variant-numeric: tabular-nums;
}

.massstab__titel {
  margin: var(--wp--preset--spacing--20) 0 0;
  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.22;
  color: var(--wp--preset--color--ink);
}

/* Die Lesebreite ist hier enger als im Fliesstext: drei Spalten
   neben einander laufen sonst optisch zu einer Wand zusammen. */
.massstab__text {
  margin: var(--wp--preset--spacing--30) 0 0;
  max-width: 26rem;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
  color: var(--wp--preset--color--muted);
}

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

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

/* ------------------------------------------------------------
   5b. Die Bildstrecke
   ------------------------------------------------------------ */
.bildstrecke { margin-top: var(--wp--preset--spacing--50); }

.bildstrecke__bahn {
  display: grid;
  grid-auto-flow: column;
  /* Zwei Bilder auf dem Schreibtisch, das dritte schaut ein Stueck
     herein. Der angeschnittene Rest sagt "hier geht es weiter",
     noch bevor jemand einen Pfeil gesehen hat. */
  grid-auto-columns: calc((100% - var(--wp--preset--spacing--40)) / 2.15);
  gap: var(--wp--preset--spacing--40);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Polsterung fuer den Fokusrahmen, scroll-padding, damit der
     Einrast-Punkt sie mitrechnet, negativer Aussenabstand zurueck
     auf den Satzspiegel. Ohne die mittlere Zeile rastet die Bahn
     am Anfang neben der Null ein, und der Zurueck-Pfeil bleibt
     dort aktiv, obwohl es nicht zurueckgeht. Gemessen an der Bahn
     von Aktuelles, 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;
}

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

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

.bildstrecke__bild {
  margin: 0;
  min-width: 0;
  scroll-snap-align: start;
}

/* Das letzte Bild rastet rechts ein, nicht links. Ohne diese Zeile
   gibt es fuer es keinen gueltigen Einrast-Punkt am Ende der Bahn,
   und rechts bleibt ein Rest stehen, den man nicht erreicht. */
.bildstrecke__bild:last-child { scroll-snap-align: end; }

/* Die Titelbaender liegen als 2400 zu 1018 vor, sind also fast
   zweieinhalb mal so breit wie hoch. Als Kachel waeren sie ein
   Streifen. Der Kasten gibt deshalb 3:2 vor und schneidet seitlich
   zu - alle vier Motive stehen mittig, es faellt nichts Tragendes
   heraus. Nachgesehen an jedem der vier Bilder.

   Die Akzentlinie unter dem Bild ist dieselbe Geste wie am
   Portrait im Profil und an den Kacheln der Wand. */
.bildstrecke__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--wp--preset--color--base);
  border-bottom: 2px solid var(--wp--preset--color--accent);
}

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

.bildstrecke__steuer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: var(--wp--preset--spacing--30);
}

/* Dieselbe Rezeptur wie die Pfeile der Bahn von Aktuelles
   (layout.css, Abschnitt 17): ein Kreis in der Hausfarbe, der
   beim Zeigen umschlaegt. */
.bildstrecke__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);
}

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

.bildstrecke__pfeil:hover:not(:disabled),
.bildstrecke__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. */
.bildstrecke__pfeil:disabled {
  opacity: 0.3;
  cursor: default;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .bildstrecke__pfeil { transition: none; }
}

/* ============================================================
   Wortmarke in einer Ueberschrift
   ------------------------------------------------------------
   Neu am 2026-09-09, Kundenwunsch aus der Mail von Martin und
   Dirk: "PJM Partner" soll auch in der Karriere-Ueberschrift die
   Schrift des Logos tragen. In Jost haengt das versale J unter
   der Grundlinie, im Logo sitzt es darauf - mit gesetzter Schrift
   ist das nicht zu heilen, also steht dort die Logo-Datei.

   Die Hoehe ist in em angegeben und nicht in rem: so waechst und
   schrumpft die Wortmarke mit dem Schriftgrad der Ueberschrift,
   der selbst einer clamp-Kurve folgt.

   Die Werte sind an der Datei ausgemessen, nicht geschaetzt
   (Stand 2026-09-09, Datei 1904 x 176):

     Versalhoehe   173 von 176 px  = 98.3 % der Bildhoehe
     Unterlaenge J   3 von 176 px  =  1.7 % der Bildhoehe
     Verhaeltnis   1904 : 176      = 10.818

   Daraus die Hoehe 0.73em: Jost traegt bei diesem Grad rund 0.72em
   Versalhoehe, und weil die Datei zu 98.3 Prozent aus Versalhoehe
   besteht, ergibt 0.72 / 0.983 rund 0.73. Die Wortmarke steht damit
   so hoch wie ein grosses A daneben. Die Breite ist 0.73 mal dem
   Verhaeltnis, also 7.9em.

   Das top holt die Grundlinie nach: vertical-align: baseline setzt
   die UNTERKANTE des Kastens auf die Grundlinie, die Grundlinie der
   Wortmarke liegt aber 1.7 Prozent ihrer Hoehe darueber. 1.7 % von
   0.73em sind die 0.012em.

   Der Abstand nach links kommt aus dem Leerzeichen im Markup und
   bleibt deshalb ohne eigene Regel.

   Die Datei liegt als MASKE, nicht als Bild. Der Grund steht in
   layout.css bei .intro__mark-bild: der Seitenkopf faerbt seine
   Ueberschrift je nach Titelbild weiss oder marineblau, und ein
   festes Marineblau-PNG waere auf dem dunklen Band unsichtbar.
   Ueber currentColor macht die Wortmarke jeden Wechsel mit.
   ============================================================ */
.wortmarke-inline {
  display: inline-block;
  width: 7.9em;
  height: 0.73em;
  vertical-align: baseline;
  position: relative;
  top: 0.012em;
  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: left center; mask-position: left center;
}

/* Die Bewerbungs-Sektion traegt seit dem 2026-09-09 nur noch zwei
   Zeilen und die beiden Knoepfe (Kundenwunsch, Begruendung im
   Markup von karriere.html). Ohne Begrenzung liefe die kurze
   Adresse ueber die volle Blattbreite und stuende verloren. */
.karriere-bewerbung {
  max-width: 34rem;
}

/* ============================================================
   Kooperationspartner auf der Kanzlei-Seite
   ------------------------------------------------------------
   Neu am 2026-09-09, Kundenwunsch: mehr Luft zwischen den
   Kacheln, und ein Zeichen je Partner "in diesem dezenten
   Orange", wie es die Rechtsgebiete vor ihren Titeln tragen.

   Die Kachel ist die .massstab von oben - Zierlinie, darunter
   der Titel. Der Modifikator ergaenzt nur das Zeichen und den
   Atem; die Nummer der Maasstaebe bleibt weg, sie laese sich
   unter Partnern als Rangfolge.

   Luft: Das Raster stand auf spacing--40 (1.5rem) und lief oben
   ohne Abstand in den Satz "Zu unseren Kooperationspartnern
   zaehlen:" - die Zierlinie der ersten Reihe klebte an der
   Zeile. Jetzt spacing--60 nach oben und spacing--50 zwischen
   den Reihen; quer bleibt spacing--50, damit die zweite Reihe
   mit ihren zwei Kacheln nicht auseinanderfaellt.

   Farbe und Groesse des Zeichens sind vom Gebietszeichen
   uebernommen und dort nachgemessen: #96610A ueber
   --wp--preset--color--accent-text, 28 px, Strichstaerke 1.1.
   Der reine Akzent (Orange #F49E00) kommt auf hellem Grund nur
   auf 2,0 zu 1 - fuer eine Kontur, die eine Aussage traegt, zu
   wenig. Die gedeckte Fassung haelt rund 4,9 und ist erkennbar
   dieselbe Farbe.
   ============================================================ */
.partner-raster {
  margin-top: var(--wp--preset--spacing--60);
  gap: var(--wp--preset--spacing--50);
}

.massstab--partner {
  padding-top: var(--wp--preset--spacing--40);
}

/* ENTSCHIEDEN am 2026-09-10, Martins Mail: "Unten bei 'Unser Netzwerk'
   nehmen wir die Variante 'Mit Zeichen'. Die Zeichen haetten wir gern
   orange."

   Damit faellt der Vergleich weg, den die Werkstatt-Leiste bis dahin
   angeboten hat: Die Zeichen stehen jetzt immer. Die Regel fuer
   data-netzwerk="mit" bleibt weiter unten stehen, damit ein
   zurueckgeholter Schalter nichts kaputt macht - sie hat nur nichts
   mehr auszurichten.

   Zur Farbe: stroke steht jetzt auf --accent (der Markenwert #FFC42F)
   statt auf --accent-text (#96610A). Der Akzent kommt auf Weiss nur auf
   1,6:1 - fuer diese Zeichen ist das zulaessig, sie sind aria-hidden
   und tragen keine Information, die der Titel darunter nicht schon
   traegt. Bei einem Zeichen MIT Aussage waere derselbe Wert ein
   Fehler. */
.massstab__zeichen {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  stroke: var(--wp--preset--color--accent);
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.massstab--partner .massstab__titel {
  margin-top: var(--wp--preset--spacing--30);
}

:root[data-netzwerk="mit"] .massstab__zeichen {
  display: block;
}

/* Ohne Zeichen rueckte der Titel an die Zierlinie heran. Seit dem
   2026-09-10 stehen die Zeichen immer, die Regel greift also nur noch,
   wenn jemand den Schalter zurueckholt und auf "ohne" stellt. */
:root[data-netzwerk="ohne"] .massstab__zeichen {
  display: none;
}

:root[data-netzwerk="ohne"] .massstab--partner .massstab__titel {
  margin-top: 0;
}

/* ------------------------------------------------------------
   Assistenz auf der Profilseite, neu am 2026-09-15.

   Kundenwunsch (Mail Dr. Uhlmannsiek): die Assistenz erscheint beim
   Anwalt "analog der Darstellung bei den Rechtsgebieten", dazu mit
   Anruf und klickbarer E-Mail. Dasselbe Bauteil wie dort
   (.team-assist, quadratisches Portrait), aber als Zeile statt als
   Kachel: in der Textspalte des Profils waeren Kacheln neben dem
   grossen Portrait zu wuchtig. Die Karte ist kein Link als Ganzes,
   weil sie zwei eigene Links traegt.
   ------------------------------------------------------------ */
.team-assist--profil {
  margin-top: var(--wp--preset--spacing--50);
}

.assist-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--wp--preset--spacing--40);
}

/* Das Portrait stand bis zum 2026-09-22 auf 5,5rem und wirkte neben dem
   Anwaltsbild wie eine Briefmarke. Mail von Martin Moebius und
   Dr. Uhlmannsiek: "Kannst du bitte die Fotos der Assistentin(innen) bei
   den jeweiligen Anwaelten groesser darstellen?" Jetzt 8,5rem - gut die
   anderthalbfache Flaeche, ohne dass die Karte den Namen daneben
   umbrechen laesst. */
.assist-karte {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--wp--preset--spacing--30);
  align-items: center;
}

.assist-karte__bild {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
}

.assist-karte__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
}

.assist-karte__text { display: flex; flex-direction: column; gap: 0.2rem; }

.assist-karte__name {
  margin: 0;
  font-size: var(--wp--preset--font-size--md);
  font-weight: 500;
  line-height: 1.25;
}

.assist-karte__name a { color: inherit; text-decoration: none; }
.assist-karte__name a:hover,
.assist-karte__name a:focus-visible { text-decoration: underline; text-underline-offset: 0.22em; }

.assist-karte__wege {
  display: flex;
  gap: var(--wp--preset--spacing--30);
  margin: 0.2rem 0 0;
  font-size: var(--wp--preset--font-size--sm);
}

/* ------------------------------------------------------------
   Wertetabelle im Beitrag, neu am 2026-09-15 fuer die uebernommenen
   Beitraege der alten PJM-Seite (Beitragsbemessungsgrenze 2026).
   Dort standen die Werte als lose Zeilen des Baukastens; hier als
   echte Tabelle: Bezeichnung links, Wert rechts, Linien wie die
   Kontaktliste.
   ------------------------------------------------------------ */
.prose .werte {
  width: 100%;
  margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50);
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--sm);
}

.prose .werte caption {
  text-align: left;
  font-weight: 600;
  color: var(--wp--preset--color--ink-deep);
  padding-bottom: var(--wp--preset--spacing--20);
}

.prose .werte th,
.prose .werte td {
  padding: 0.6rem 0;
  border-top: var(--wp--custom--rule--soft);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}

.prose .werte td {
  padding-left: var(--wp--preset--spacing--30);
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: var(--wp--preset--color--ink-deep);
}

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

/* ------------------------------------------------------------
   Unsere Publikationen: der Arbeitsrechtsreport auf der Seite
   Aktuelles, neu am 2026-09-16.

   Drei Stufen, damit 58 Ausgaben nicht zur Kolonne werden: die
   aktuelle Ausgabe als Karte im Zuschnitt der Fusions-Kachel
   (Bild links, Text rechts), darunter die letzten acht als
   ruhige Zeilen, der Rest im Aufklapper.

   Bewusst KEIN eigenes Bauteil fuer die Zeilen: sie nehmen die
   Linien der Kontaktliste und die Schriftgrade des Hauses. Eine
   Publikationsliste ist ein Verzeichnis, kein Kachelfeld.
   ------------------------------------------------------------ */
.lead--sektion {
  max-width: 44rem;
  margin: 0 0 var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--muted);
}

.report {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  background: var(--wp--preset--color--base);
  border: var(--wp--custom--rule--soft);
  overflow: hidden;
}

.report__figur {
  position: relative;
  margin: 0;
  min-height: 13rem;
  background: var(--wp--preset--color--surface);
}

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

.report__text { padding: var(--wp--preset--spacing--50); }

.report__meta {
  margin: 0;
  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);
}

.report__titel {
  margin: 0.2rem 0 0;
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 500;
  color: var(--wp--preset--color--ink-deep);
}

.report__datum {
  margin: 0.1rem 0 var(--wp--preset--spacing--40);
  color: var(--wp--preset--color--muted);
}

.report__inhalt { margin: 0; }
.report__inhalt li { max-width: 46rem; }

.report__hinweis { margin: var(--wp--preset--spacing--40) 0 0; }

.report-archiv { margin-top: var(--wp--preset--spacing--60); }

.report-archiv__titel {
  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;
}

/* Zwei bis vier Spalten, je nach Platz. Eine einzige Spalte waere
   bei 58 Ausgaben eine Bildschirmhoehe voll Zahlen. */
.report-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0 var(--wp--preset--spacing--50);
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  padding: 0.7rem 0;
  border-top: var(--wp--custom--rule--soft);
  font-size: var(--wp--preset--font-size--sm);
}

.report-zeile__nr { color: var(--wp--preset--color--ink-deep); }
.report-zeile__datum { color: var(--wp--preset--color--muted); }

.report-mehr { margin-top: var(--wp--preset--spacing--50); }

/* Der Sprung in eine andere Sektion, nicht ein weiterer Filter.
   Deshalb abgesetzt: eigene Zeile, links unter dem ersten Eintrag,
   Text im Akzent. Bis zum 2026-09-25 stand er rechtsbuendig mit
   Trennstrich; Dr. Uhlmannsiek fand ihn dort "ein bisschen verloren". */
.jumpbar__extra { flex-basis: 100%; }

.jumpbar__extra a { color: var(--wp--preset--color--accent-text); }

@media (max-width: 60rem) {
  .report { grid-template-columns: minmax(0, 1fr); }
  .report__figur { min-height: 11rem; }
}

/* Kennzeichnung "KI-generiert" auf den Titelbildern: am 2026-10-05
   entfernt, Kundenwunsch aus der Mail von Dr. Uhlmannsiek ("Bitte nimm
   das KI-generiert bei den Fotos raus"). Die Fassung vom 2026-09-16
   samt Begruendung (Art. 50 Abs. 4 KI-VO) steht in der git-Historie. */

/* Titelblatt statt Motiv, seit dem 2026-09-23: das Blatt ist hochkant
   und wird ganz gezeigt, nicht beschnitten - auf der Flaeche der Karte,
   mit etwas Luft und einem leisen Schatten wie ein aufgelegtes Heft. */
.report__figur--titelblatt { min-height: 18rem; }
.report__figur--titelblatt img {
  object-fit: contain;
  padding: var(--wp--preset--spacing--40);
  filter: drop-shadow(0 2px 6px rgba(0, 48, 91, 0.18));
}

/* Die Zeilen sind seit dem 2026-09-23 Downloads. */
a.report-zeile { color: inherit; text-decoration: none; }
a.report-zeile:hover .report-zeile__nr,
a.report-zeile:focus-visible .report-zeile__nr { text-decoration: underline; text-underline-offset: 0.2em; }

/* Themen je Ausgabe, seit dem 2026-09-23. Die Kanzlei will vor dem
   Klick sehen, worum es in einer Ausgabe geht. Zeile eins das Thema,
   Zeile zwei leise Gericht und Aktenzeichen - wie im Heft selbst. */
.report-themen {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--wp--preset--spacing--30);
}
.report-themen li { display: grid; gap: 0.1rem; max-width: 46rem; }
.report-thema__titel { color: var(--wp--preset--color--ink-deep); }
.report-thema__gericht {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted);
}
.report-themen--klein { font-size: var(--wp--preset--font-size--sm); gap: var(--wp--preset--spacing--20); }

.report-ausgaben {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: var(--wp--preset--spacing--50);
}
.report-ausgabe {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--base);
  border: var(--wp--custom--rule--soft);
}
.report-ausgabe__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--20);
  border-bottom: var(--wp--custom--rule--soft);
}
.report-ausgabe__titel {
  margin: 0;
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 500;
  color: var(--wp--preset--color--ink-deep);
}
.report-ausgabe__datum { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); }
.report-ausgabe__pdf { margin: auto 0 0; padding-top: var(--wp--preset--spacing--20); }

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

/* ------------------------------------------------------------
   Arbeitsrechtsreport im Aufbau der Glauber-Seite, seit dem
   2026-09-23. Ersetzt Karte und Kachelraster (.report, .report-
   ausgaben): die Kanzlei fand die Kacheln zu gross und zu unruhig.
   Rechts die Artikel der aktuellen Ausgabe untereinander, links
   Titelblatt und Ausgabenliste. Auf dem Telefon zuerst die Artikel.
   ------------------------------------------------------------ */
.ar-layout {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  grid-template-areas: "seite eintraege";
  gap: var(--wp--preset--spacing--60);
  align-items: start;
}
.ar-eintraege { grid-area: eintraege; display: grid; gap: var(--wp--preset--spacing--50); }
.ar-seite { grid-area: seite; display: grid; gap: var(--wp--preset--spacing--40); }

.ar-eintrag { max-width: 46rem; }
.ar-eintrag__meta {
  margin: 0;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--muted);
}
.ar-eintrag__rubrik {
  margin: 0.4rem 0 0;
  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);
}
.ar-eintrag__titel {
  margin: 0.2rem 0 0;
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 500;
  color: var(--wp--preset--color--ink-deep);
}
.ar-eintrag__gericht {
  margin: 0.15rem 0 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--muted);
}
.ar-eintrag__auszug { margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30); }

.ar-seite__titelblatt { display: block; background: var(--wp--preset--color--base); border: var(--wp--custom--rule--soft); padding: var(--wp--preset--spacing--30); }
.ar-seite__titelblatt img { display: block; width: 100%; height: auto; }
.ar-seite__kasten { background: var(--wp--preset--color--base); border: var(--wp--custom--rule--soft); padding: var(--wp--preset--spacing--40); }
.ar-seite__titel {
  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--accent-text);
  font-weight: 600;
}
.ar-seite__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: var(--wp--preset--font-size--sm); }
.ar-seite__liste a { color: var(--wp--preset--color--ink-deep); text-decoration: none; }
.ar-seite__liste a:hover, .ar-seite__liste a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.ar-aelter { margin-top: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--30); border-top: var(--wp--custom--rule--soft); }
.ar-aelter summary { cursor: pointer; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--accent-text); font-weight: 500; }
.ar-aelter[open] summary { margin-bottom: var(--wp--preset--spacing--30); }

@media (max-width: 50rem) {
  .ar-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eintraege" "seite"; }
  .ar-seite__titelblatt { max-width: 14rem; }
}