/* ============================================================
   Version A - "Kanzlei"
   ------------------------------------------------------------
   These: Die Seite tritt zurueck, die Substanz tritt vor.
   Archetyp: strenges Raster, mathematische Abstaende, keine Dekoration.

   Greift ausschliesslich ueber [data-version="a"] am <html>-Element.
   Kein eigenes Markup, keine eigenen Bausteine.
   ============================================================ */

:root[data-version="a"] {
  /* ---------- Typo-Haltung: ruhig, gemischte Schreibung ---------- */
  --wp--custom--case--display: none;
  --wp--custom--tracking--display: -0.01em;
  --wp--custom--tracking--label: 0.14em;
  --wp--custom--weight--display: 500;
  --wp--custom--weight--heading: 500;

  --wp--preset--font-size--display: clamp(1.75rem, 1.35rem + 1.5vw, 2.25rem);
  --wp--preset--font-size--xxl: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
  --wp--preset--font-size--xl: clamp(1.25rem, 1.1rem + 0.55vw, 1.4375rem);
  --wp--preset--font-size--lg: 1.1875rem;

  /* ---------- Flaeche: streng weiss, Off-White nur als Zaesur ---------- */
  --wp--custom--section--surface: var(--wp--preset--color--base);
  --wp--custom--section--rhythm: var(--wp--preset--spacing--70);

  /* ---------- Hero: bildschirmfuellend, nach Bick Law ----------
     Bewusste Umkehr gegenueber dem ersten Stand. Version A traegt
     jetzt den grossen Auftritt, Version B den redaktionellen.
     Damit unterscheiden sich die beiden dort, wo man zuerst
     hinsieht, statt nur in Nuancen. */
  /* Volle Bildschirmhoehe, und zwar wirklich von ganz oben.

     Zwischenstand vom 2026-07-30 vormittags: der klebende Kopf
     stand im Fluss ueber dem Hero, das Bild fing erst darunter an,
     und die Hoehe war um genau die Kopfhoehe gekuerzt. Das war
     richtig, solange der Kopf deckend war - eine weisse Leiste
     ueber einem Foto braucht keine Bildpixel dahinter.

     Seit der Kopf Milchglas ist, ist es falsch: dort, wo man das
     Bild durchscheinen sehen soll, war gar keines. Der Hero laeuft
     deshalb jetzt bis unter den Kopf. Den Abzug ersetzt ein
     negativer Aussenabstand am Hero (layout.css, Abschnitt 8) -
     die Rechnung bleibt dieselbe, nur zieht sie das Bild nach oben
     statt es zu kuerzen. */
  --wp--custom--hero--height: calc(var(--wp--custom--vh) * 100);
  --wp--custom--hero--overlay: 1;

  /* ---------- Bewegung: nur Zustandswechsel ---------- */
  --wp--custom--motion--reveal: 0px;
  --wp--custom--motion--parallax: 0;

  /* ---------- Bild: sehr zurueckhaltender Farblook ---------- */
  --wp--custom--image--filter: saturate(0.78) contrast(1.02);
}

/* ------------------------------------------------------------
   Raster: strenge zwoelf Spalten, mathematische Abstaende.
   ------------------------------------------------------------ */
[data-version="a"] .section {
  padding-block: var(--wp--preset--spacing--60);
}

[data-version="a"] .section--tight {
  padding-block: var(--wp--preset--spacing--50);
}

/* Zaesur statt Rahmen. K7: keine Umrandungen. */
[data-version="a"] .section + .section {
  border-top: var(--wp--custom--rule--soft);
}

/* ------------------------------------------------------------
   Hero: das Bild fuellt die Seite, der Text sitzt darauf.
   Vorbild ist Bick Law, Martins erklaerter Favorit.
   Kein zweiter Baustein, nur andere Tokens und Positionen -
   das Markup ist mit Version B identisch.
   ------------------------------------------------------------ */
[data-version="a"] .hero {
  position: relative;
  padding-block: 0;
  isolation: isolate;
  /* Der weiche Pool hinter dem Text ragt bewusst weit ueber den
     Textblock hinaus. Ohne diese Klammer wuerde er die Seite
     horizontal aufschieben - gemessen bis zu 209px Ueberlauf.

     clip statt hidden: hidden wuerde einen Scroll-Container
     aufmachen und damit position:sticky im Inneren toeten. Genau
     das braucht der Treppenhaus-Flug aber. */
  overflow: clip;
}

/* Das Bild verlaesst den Satzspiegel und deckt die ganze Sektion.
   Als absolut gesetztes Kind bezieht es sich auf .hero, nicht auf
   den Innenrahmen - deshalb greift dessen Polsterung hier nicht. */
[data-version="a"] .hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

[data-version="a"] .hero__figure { height: 100%; }

[data-version="a"] .hero__figure img { object-position: 50% 42%; }

/* Der Schleier haelt nur noch die Ecken zusammen und nimmt dem
   Motiv oben und unten die Spitzlichter. Er ist hell, nicht dunkel:
   Martin will die Seite ausdruecklich "freundlicher, frischer,
   heller". Ein dunkler Hero waere genau das Gegenteil. */
[data-version="a"] .hero__figure::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.62) 8%,
    rgba(255, 255, 255, 0.12) 22%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.34) 100%
  );
}

/* Bewusst NICHT positioniert. Sonst wuerde das absolut gesetzte
   Bild sich auf den Satzspiegel beziehen und bliebe auf dessen
   Hoechstbreite stehen - mit weissen Raendern links und rechts.
   Der Textblock hebt sich selbst ueber das Bild, siehe unten. */
[data-version="a"] .hero__inner {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: calc(var(--wp--custom--vh) * 100);
  /* Optische statt geometrischer Mitte. Seit im Hero nur noch eine
     Zeile steht, faellt auf, was bei drei Elementen niemand sieht:
     Ein einzelnes Element auf der halben Hoehe wirkt abgesunken,
     weil das Auge die untere Bildhaelfte schwerer nimmt. Die Zeile
     steht deshalb rund fuenf Prozent der Bildschirmhoehe darueber.

     Umgesetzt ueber die untere Polsterung, nicht ueber eine
     Verschiebung: so bleibt der Block im Fluss, nichts ueberlappt,
     und der Traeger dahinter wandert mit. Nicht svh - siehe die
     Fallen in der UEBERGABE.

     Die Kopfhoehe oben ist seit dem 2026-07-30 dazugekommen: der
     Hero reicht jetzt bis unter den Kopf, und ohne diesen Ausgleich
     ruecke der Inhalt um genau diese Hoehe nach oben. Das Bild
     waechst nach oben, der Text bleibt, wo er stand. */
  padding-block:
    calc(var(--wp--preset--spacing--70) + var(--wp--custom--kopf--hoehe))
    calc(var(--wp--preset--spacing--70) + var(--wp--custom--vh) * 10);
  text-align: center;
}

/* Der Text muss ausdruecklich ueber das Bild gehoben werden.
   Ohne eigene Position wuerde er als nicht positioniertes Element
   unter der absolut gesetzten Bildflaeche gezeichnet, obwohl er
   im Markup danach kommt. */
[data-version="a"] .hero__claim {
  position: relative;
  z-index: 1;
  max-width: 60rem;
  color: var(--wp--preset--color--ink);
}

/* Gross und leicht, versal, weit laufend - die Sprache der
   Wortmarke, hier auf dem Bild. Unterhalb des Heros bleibt
   Version A in gemischter Schreibung und ruhig. */
[data-version="a"] .hero .display {
  /* Groesser als vorher, weil nichts mehr danebensteht. Der Grad
     ist so gewaehlt, dass die Zeile auf allen Breiten in zwei
     Zeilen bricht - "RECHT FUER UNTERNEHMEN," und "FAMILIEN UND
     VERMOEGEN". Eine dritte Zeile waere ein Absatz, keine
     Aussage. */
  font-size: clamp(1.9rem, 0.95rem + 3.6vw, 3.5rem);
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.26;
  /* K6: keine Silbentrennung in der Hauptzeile. "UNTER-NEHMEN"
     mitten in der Ueberschrift liest sich wie ein Versehen.
     Lieber eine Zeile mehr als ein getrenntes Wort. */
  hyphens: manual;
}

/* Im Hero steht der Vorspann in Marineblau, nicht in Gold. Gold
   auf dem hellen Motiv erreicht nur 3:1 und ist damit zu schwach.
   Die goldene Zierlinie darunter traegt den Akzent weiter - genau
   wie in der Wortmarke: Schrift blau, Linien gold. */
[data-version="a"] .hero .eyebrow {
  color: var(--wp--preset--color--ink);
}

[data-version="a"] .hero .eyebrow::after {
  margin-inline: auto;
  background: var(--wp--preset--color--accent);
}

[data-version="a"] .hero .lead {
  color: var(--wp--preset--color--ink);
  margin-inline: auto;
  max-width: 38rem;
}

[data-version="a"] .hero__scroll {
  display: flex;
  color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------
   Kopfbereich: hier stand die Sonderregel fuer Version A.
   ------------------------------------------------------------
   Bis zum 2026-07-30 lag der Kopf ueber dem Hero absolut und
   durchsichtig, mit einer weichen Unschaerfe-Zone darunter, und
   er scrollte mit dem Bild weg. Nur die Fassung E hatte den
   weissen, klebenden Kopf.

   Operator-Entscheid vom 2026-07-30: der Kopf aus Fassung E gilt
   ueberall. Diese Sektion entfaellt deshalb ersatzlos - der Kopf
   in layout.css Abschnitt 7 ist ab jetzt der einzige, auf jeder
   Seite und in jeder Fassung.

   Mit ihr entfaellt zwangslaeufig auch die Unschaerfe-Zone: sie
   war dafuer da, das Motiv unter einem durchsichtigen Kopf
   abzudunkeln. Hinter einer deckend weissen Leiste waere sie
   unsichtbar und nur noch Rechenlast.

   Ebenso die Farbregeln fuer Wortmarke, Menue und Umschalter: sie
   setzten ueberall Tintenblau, was der weisse Kopf ohnehin tut.
   Und die Sonderbehandlung des aufgeklappten Menues auf schmalen
   Geraeten - sie gab dem durchsichtigen Kopf einen weissen Grund,
   den er jetzt immer hat.

   Historie, damit sie nicht zweimal gebaut wird: am 2026-07-29
   stand hier kurz eine schwebende Glaskapsel nach dem Vorbild
   dunkler Anwendungsleisten. Nach Ansicht verworfen - auf einer
   hellen, ruhigen Kanzleiseite wirkt eine gerundete Kapsel wie
   ein Fremdkoerper. Es geht ausdruecklich NICHT um Glas,
   Rundungen oder Schweben.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Akzent: ausschliesslich Linien, Hover, Aktivzustand, Buttons.
   Nie als Flaeche. Register 3.5.
   ------------------------------------------------------------ */
[data-version="a"] .accent-band {
  background: transparent;
  border-top: var(--wp--custom--rule--accent);
  border-bottom: var(--wp--custom--rule--soft);
}

[data-version="a"] .eyebrow::after {
  width: 2.25rem;
}

/* ------------------------------------------------------------
   Rechtsgebiete: ruhige Kacheln, reduzierte Strichicons, ohne Rahmen.
   ------------------------------------------------------------ */
[data-version="a"] .rg-card {
  background: transparent;
  padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--40);
  border-top: var(--wp--custom--rule--soft);
}

/* Farbwechsel am 2026-09-10, Martins Mail: "Koenntest du die Symbole bei
   den einzelnen Rechtsgebieten orange setzen?" und, fuer dieselben Zeichen
   in der kompakten Fassung auf den Anwaltsseiten: "Koenntest du die Symbole
   unten auf der Seite nach der Ueberschrift 'Spezialisiert auf' auch in
   orange setzen?"

   Beide Stellen haengen an dieser einen Regel, weil die Anwaltsseiten
   dasselbe .rg-card__icon tragen (mit rg-card--compact daneben). Ein
   Wechsel, zwei erledigte Wuensche.

   --accent statt --accent-text: derselbe Schritt wie bei den
   Netzwerk-Zeichen. Die Zeichen sind aria-hidden, der Kacheltitel steht
   unmittelbar daneben und traegt die Aussage. Die Strichstaerke steigt
   von 1,1 auf 1,3, damit der helle Ton auf dem hellen Grund nicht
   ausfranst - der Wert stand vorher auf der Annahme eines dunkleren
   Strichs. */
[data-version="a"] .rg-card__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--wp--preset--color--accent);
  stroke-width: 1.3;
}

[data-version="a"] .rg-card:hover .rg-card__icon,
[data-version="a"] .rg-card:focus-within .rg-card__icon {
  color: var(--wp--preset--color--accent);
}

[data-version="a"] .rg-card__title {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
}

/* ------------------------------------------------------------
   Personen: ruhig, gleiche Hoehe, Name immer unter dem Bild (K3).
   ------------------------------------------------------------ */
[data-version="a"] .person__name {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
}

/* ------------------------------------------------------------
   Dunkles Band: in A nur einmal, als Kontaktabschluss.
   ------------------------------------------------------------ */
[data-version="a"] .band-dark {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--ink);
  border-top: var(--wp--custom--rule--soft);
}

[data-version="a"] .band-dark .band-dark__meta,
[data-version="a"] .band-dark p {
  color: var(--wp--preset--color--muted);
}

[data-version="a"] .band-dark a {
  color: var(--wp--preset--color--ink);
}

/* Der Ladeknopf der Karte fuellt sich beim Zeigen mit Tinte;
   das Gegenstueck fuer die dunkle Version steht in theme-b. */
[data-version="a"] .karte__laden:hover,
[data-version="a"] .karte__laden:focus-visible {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------
   Zustandswechsel, 150 bis 250 ms. Kein Scroll-Effekt.
   ------------------------------------------------------------ */
[data-version="a"] [data-reveal] {
  opacity: 1;
  transform: none;
}

/* Titelbild-Streifen: in A knapper, die Seite tritt zurueck. */
[data-version="a"] .titelbild__figur { height: clamp(6rem, 13vh, 8.5rem); }