/* ==========================================================================
   EVANDO Rechtsanwaltskanzlei – gemeinsames Stylesheet
   Farben, Schriften und Abstände werden zentral in :root gesteuert.
   Gestaltungsgrundlage ist der gemeinsame EVANDO-Auftritt
   (identische Tokens wie evando-consulting.de).
   ========================================================================== */

@font-face { font-family: "Oswald"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/oswald-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/oswald-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/oswald-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/newsreader-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-sans-pro-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-sans-pro-latin-600-normal.woff2") format("woff2"); }

:root {
  --ink: #1A3E54;        /* EVANDO-Tintenblau */
  --ink-deep: #0F2635;   /* Bildabdunklung */
  --ink-soft: #4D4D4D;   /* Fließtext auf hellem Grund */
  --stone: #8D8D8D;
  --paper: #F5F5F5;
  --white: #FFFFFF;
  --rule: #D6DADD;
  --mist: #DCE5EA;       /* Fließtext auf Tintenblau */
  --error: #9B2C2C;
  --header-h: 96px;
  --gutter: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(.2,.7,.2,1);
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --text: "Source Sans Pro", system-ui, sans-serif;
  --marke: "Oswald", "Arial Narrow", sans-serif;
  --gross: clamp(19px, 1.5vw, 22px);
  --klein: clamp(16px, 1.2vw, 18px);
  --hover: #5B5A56;
  /* Laufweite der Oswald-Zeilen im Gemischtsatz. Oswald ist eine schmal
     laufende Schrift; neben dem weiter gebauten Lesetext wirkt sie ohne
     Sperrung gedraengt. Kleine Grade brauchen dabei mehr als grosse. */
  --spur-titel: .04em;
  --spur-link: .055em;
}

/* --------------------------------------------------------------------------
   Bilder: alle Bildpfade an einer Stelle. Die Dateien liegen in assets/img/
   als WebP, 2400 Pixel breit.
   -------------------------------------------------------------------------- */
.img-pflanze         { background-image: url("img/pflanze.webp"); }
.img-portrait-profil { background-image: url("img/portrait-profil.webp"); }
/* Bildband „Ihre Ansprechpartnerin“. Alternative mit kleinerem Kopf (Ganzfigur):
   .../2026/10/F21-018_7417.jpg – dann in .person-band.hell .parallax-img
   background-position auf "center 12%" stellen. */
.img-portrait-band   { background-image: url("img/portrait-band.webp"); }
.img-portrait-ganz   { background-image: url("img/portrait-ganz.webp"); }
.img-portrait-nah    { background-image: url("img/portrait-nah.webp"); }
.img-beton           { background-image: url("img/beton.webp"); }
.img-treppe          { background-image: url("img/treppe.webp"); }
.img-blatt           { background-image: url("img/blatt.webp"); }
.img-stein           { background-image: url("img/stein.webp"); }
.img-sockel          { background-image: url("img/sockel.webp"); }
.img-raum            { background-image: url("img/raum.webp"); }
.img-sessel          { background-image: url("img/sessel.webp"); }
.img-goldgasse       { background-image: url("img/goldgasse.webp"); }
.img-wi-besprechung  { background-image: url("img/wi-besprechung.webp"); }
.img-weilburg        { background-image: url("img/weilburg.webp"); }
.img-wel-besprechung { background-image: url("img/wel-besprechung.webp"); }

/* Bilder der Expertise-Seiten, Zuordnung wie auf der bisherigen Homepage.
   Durchweg ruhige, gegenstandslose Aufnahmen; sie tragen keine Aussage und
   sind im Markup daher als schmückend ausgezeichnet. */
.img-brief           { background-image: url("img/brief.webp"); }
.img-rillen          { background-image: url("img/rillen.webp"); }
.img-nische          { background-image: url("img/nische.webp"); }
.img-welle           { background-image: url("img/welle.webp"); }
.img-holzbogen       { background-image: url("img/holzbogen.webp"); }
.img-schale          { background-image: url("img/schale.webp"); }
.img-glas            { background-image: url("img/glas.webp"); }
.img-holzblock       { background-image: url("img/holzblock.webp"); }
.img-podest          { background-image: url("img/podest.webp"); }
.img-halle           { background-image: url("img/halle.webp"); }
.img-kugel           { background-image: url("img/kugel.webp"); }

/* Grundlagen */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--text); font-variant-numeric: lining-nums; }
h1, h2, h3, dt { overflow-wrap: break-word; hyphens: manual; }
.legal, .prose, .detail-list dd { hyphens: auto; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; background: var(--white); color: var(--ink); font-weight: 600; }
.skip-link:focus { top: 12px; }
[id] { scroll-margin-top: 90px; }

/* Überschriften-Stil der Marke */
.display { font-family: var(--display); font-weight: 300; letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
h2.display { margin: 0; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.2; }

/* --------------------------------------------------------------------------
   Kopfzeile: transparent über dem Bild, beim Scrollen weiß
   -------------------------------------------------------------------------- */
/* Menüband: weiß-transparent mit dunkler Schrift, beim Scrollen deckend weiß */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 10; color: var(--ink); background: rgba(255,255,255,.74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: none; transition: background-color .35s, color .35s; }
.site-header .wrap { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; transition: height .35s var(--ease); }
.site-header.solid { background: var(--white); color: var(--ink); box-shadow: none; }
.site-header.solid .wrap { height: 68px; }
.logo { font-size: 40px; text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1; transform-origin: left center; transition: transform .35s var(--ease); }
.site-header.solid .logo { transform: scale(.8); }
.logo .word { font: 400 1em/1 var(--display); letter-spacing: .16em; margin-right: -.16em; }
/* Unterzeile exakt so breit wie die Wortmarke: links und rechts bündig */
/* Die Unterzeile ist exakt so breit wie die Wortmarke. Laufweite aus den
   gemessenen Glyphenbreiten der Oswald berechnet: EVANDO 2,959 em (400),
   Rechtsanwaltskanzlei 7,269 em (300), 19 Zwischenräume, Schriftgrad .34em.
   Wird einer dieser Werte geändert, ist die Laufweite neu zu berechnen:
   letter-spacing = ((2,959 + 0,8) / Schriftgrad − 7,269) / 19 */
.logo .sub { font: 300 .34em/1 var(--display); letter-spacing: .1993em; margin-right: -.1993em; margin-top: .24em; opacity: .9; }
.nav .menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(18px, 2.2vw, 38px); }
.nav .has-sub { position: relative; }
.nav .menu > li > a { position: relative; display: inline-block; font: 400 15px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 14px 0; }
/* "Expertise" ist kein Ziel, sondern nur die Beschriftung des Untermenüs.
   Als Schaltfläche bleibt sie mit der Tastatur erreichbar. */
.nav .menu > li > .sub-label { position: relative; appearance: none; -webkit-appearance: none; background: none; border: 0; border-radius: 0; margin: 0; padding: 14px 0; font: 400 15px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: inherit; cursor: default; }
.nav .menu > li > .sub-label:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.nav .menu > li > a::after, .nav .menu > li > .sub-label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav .menu > li > a:hover::after, .nav .menu > li > a[aria-current="page"]::after, .nav .menu > li > a.current::after, .nav .has-sub:hover > a::after, .nav .has-sub:focus-within > a::after,
/* "Expertise" ist eine Schaltfläche, kein Verweis. Ohne diese Zeilen bliebe
   der Punkt beim Aufruf einer Expertise-Seite ohne Unterstrich. */
.nav .menu > li > .sub-label.current::after, .nav .has-sub:hover > .sub-label::after, .nav .has-sub:focus-within > .sub-label::after { transform: scaleX(1); }

/* Untermenü: erscheint unter dem Hauptpunkt beim Überfahren oder per Tastatur */
.submenu { list-style: none; margin: 0; padding: 10px 0; position: absolute; top: 100%; left: -22px; min-width: 290px; background: var(--white); color: var(--ink); border-radius: 4px; box-shadow: 0 14px 32px rgba(15,38,53,.18); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .3s var(--ease), visibility 0s linear .3s; }
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.has-sub:hover > .submenu, .has-sub:focus-within > .submenu, .has-sub.open > .submenu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s var(--ease), visibility 0s; }
.submenu a { display: block; padding: 11px 22px; font: 400 15px/1.35 var(--display); letter-spacing: .06em; text-decoration: none; color: var(--ink); transition: background-color .2s, padding-left .25s var(--ease); }
.submenu a:hover, .submenu a:focus-visible { background: var(--paper); padding-left: 28px; }
.submenu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.nav .has-sub:last-child > .submenu { left: auto; right: -22px; }
.menu-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; color: inherit; }

/* --------------------------------------------------------------------------
   Buttons und Textlinks
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 34px; font: 400 16px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border: 0; border-radius: 4px; background: transparent; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,.2); transition: transform .8s cubic-bezier(.25,.8,.25,1), box-shadow .8s cubic-bezier(.25,.8,.25,1), background-color .4s ease, color .3s; }
.btn:hover, .btn:focus-visible { transform: translateY(-6px); box-shadow: 0 15px 30px rgba(0,0,0,.4); }
.btn:active { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }
.btn-solid { background: rgba(255,255,255,.78); color: var(--ink); box-shadow: 0 5px 15px rgba(0,0,0,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-solid:hover { background: rgba(255,255,255,.86); box-shadow: 0 15px 30px rgba(0,0,0,.5); }
.btn-ghost { color: var(--white); background: rgba(255,255,255,.05); box-shadow: 0 5px 15px rgba(0,0,0,.28); }
.btn-ghost:hover { background: rgba(255,255,255,.12); box-shadow: 0 15px 30px rgba(0,0,0,.5); }
.btn-ink { color: var(--ink); background: rgba(26,62,84,0); box-shadow: 0 5px 15px rgba(0,0,0,.18); }
.btn-ink:hover { background: rgba(26,62,84,.12); box-shadow: 0 15px 30px rgba(0,0,0,.32); }
/* Über einem Titelbild braucht der helle Knopf eine eigene Fläche. Ohne sie
   steht die dunkle Schrift unmittelbar auf dem Foto und ist dort, wo das Bild
   dunkel wird, nicht mehr lesbar (gemessen 1,5 : 1). Mit 70 % Weiß sind es
   mindestens 5 : 1, auch über einer schwarzen Stelle. */
.hero .btn-ink { background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-ink-solid { background: var(--ink); color: var(--white); }
.btn-ink-solid:hover { background: #224D67; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; }
.arrow-link { display: inline-flex; align-items: center; gap: 14px; align-self: flex-start; font: 400 16px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 6px 0; border-bottom: 1px solid currentColor; }
.arrow-link svg { transition: transform .35s var(--ease); }
.arrow-link:hover svg, a:hover > .arrow-link svg, a:focus-visible > .arrow-link svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Hero (Startseite) und Seitenkopf (Unterseiten)
   -------------------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; background: var(--ink-deep); }
.hero.page { min-height: max(520px, 72svh); }
.hero-img { position: absolute; inset: 0; background-position: 70% top; background-size: cover; background-repeat: no-repeat; }
.hero-img.rechts { background-position: 78% top; }
.hero-img.mitte { background-position: center; }
.hero::after { content: ""; position: absolute; inset: 0; background: url("img/rauschen.png"), linear-gradient(90deg, rgba(15,38,53,.90) 0%, rgba(15,38,53,.72) 45%, rgba(15,38,53,.34) 100%); }

/* Heller Bildeindruck (Startseite): die Aufnahme behält ihre eigene Farbe,
   der Text steht auf einem aufgehellten Verlauf statt auf blauer Einfärbung. */
/* Heller Kopf: auch die Ausweichfarbe hell, sonst blitzt vor dem Laden
   des Bildes die dunkle Grundfarbe durch. */
.hero.hell { color: var(--ink); background: var(--paper); }
.hero.hell .hero-img { filter: brightness(1.07) saturate(1.08); }
/* Die Überschrift bleibt links vom Portrait: Schriftgrad und Spaltenbreite sind
   so begrenzt, dass die längste Zeile das Gesicht in keiner Fensterbreite erreicht. */
.hero.hell h1 { font-size: clamp(40px, 4.2vw, 64px); max-width: 52%; }
.hero.hell .lead { max-width: min(46ch, 52%); }
/* In hohen, schmalen Fenstern wandert der Bildausschnitt; der Bildfokus wird
   dann so gesetzt, dass das Portrait rechts der Textspalte bleibt. */
.hero.hell .hero-img.rechts { background-position: 64% top; }
/* Heller Kopf der Unterseiten: gleiche Aufhellung, aber ohne die Geometrie
   des Porträts. Der Verlauf läuft von links nach rechts aus, damit die
   dunkle Schrift auf heller Fläche steht. */
.hero.page.hell::after { background: linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.88) 26%, rgba(255,255,255,.58) 44%, rgba(255,255,255,.24) 60%, rgba(255,255,255,.12) 100%); }
.hero.page.hell .hero-img { background-position: center; }
.hero.hell::after { background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.90) 24%, rgba(255,255,255,.62) 40%, rgba(255,255,255,.22) 54%, rgba(255,255,255,.10) 70%, rgba(255,255,255,.08) 100%); }
.hero.hell .lead { color: var(--ink-soft); }
.hero.hell .eyebrow { color: var(--stone); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--header-h) + 48px); padding-bottom: clamp(72px, 13vh, 140px); }
.hero.page .wrap { padding-bottom: clamp(56px, 10vh, 112px); }
.hero h1 { margin: 0 0 32px; font: 300 clamp(44px, 5.4vw, 88px)/1.18 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.hero.page h1 { font-size: clamp(40px, 4.6vw, 74px); margin-bottom: 24px; }
.hero h1 .line { display: block; overflow: hidden; padding: .16em 0 .04em; margin-top: -.16em; }
.hero h1 .line > span { display: inline-block; }
.hero .lead { max-width: 48ch; margin: 0 0 38px; font-size: 19px; font-weight: 500; line-height: 1.55; color: var(--mist); }
.hero.page .lead { margin-bottom: 0; }
.hero .eyebrow { margin: 0 0 18px; font: 400 15px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }

@media (prefers-reduced-motion: no-preference) {
  .js .hero-img { transform: scale(1.12); opacity: .4; }
  .js .hero h1 .line > span { transform: translateY(105%); }
  .js .hero .lead, .js .hero .actions, .js .hero .eyebrow { opacity: 0; transform: translateY(14px); }
  .loaded .hero-img { transform: scale(1); opacity: 1; transition: transform 3.2s var(--ease), opacity 1.4s ease; }
  .loaded .hero h1 .line > span { transform: none; transition: transform 1s cubic-bezier(.2,.75,.2,1); }
  .loaded .hero h1 .line:nth-child(1) > span { transition-delay: .3s; }
  .loaded .hero h1 .line:nth-child(2) > span { transition-delay: .45s; }
  .loaded .hero h1 .line:nth-child(3) > span { transition-delay: .6s; }
  .loaded .hero .eyebrow { opacity: 1; transform: none; transition: opacity .9s .2s, transform .9s .2s var(--ease); }
  .loaded .hero .lead { opacity: 1; transform: none; transition: opacity .9s 1s, transform .9s 1s var(--ease); }
  .loaded .hero .actions { opacity: 1; transform: none; transition: opacity .9s 1.15s, transform .9s 1.15s var(--ease); }
}

/* Flache Bildschirme: Kopfbereich zusammenziehen, damit die Schaltflächen sichtbar bleiben */
@media (min-width: 901px) and (max-height: 820px) {
  .hero h1 { font-size: clamp(40px, 4.4vw, 68px); margin-bottom: 24px; }
  .hero .lead { margin-bottom: 32px; }
  .hero .wrap { padding-top: calc(var(--header-h) + 28px); padding-bottom: clamp(48px, 8vh, 90px); }
}

/* Seitenkopf ohne Bild (Kontakt, Honorar, Rechtstexte) */
.page-head { padding: calc(var(--header-h) + clamp(56px, 8vw, 104px)) 0 clamp(40px, 5vw, 64px); }
.page-head h1 { margin: 0 0 20px; font: 300 clamp(38px, 4.4vw, 68px)/1.15 var(--display); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.page-head p { max-width: 54ch; margin: 0; font-size: 19px; font-weight: 500; line-height: 1.55; }

/* --------------------------------------------------------------------------
   Abschnitte
   -------------------------------------------------------------------------- */
.section { padding: clamp(88px, 11vw, 150px) 0; }
.section.white { background: var(--white); }
/* Große Volltonflächen erhalten eine sehr feine Rauschstruktur (Alpha 2 bis 5 von
   255). Sie ist mit bloßem Auge nicht zu erkennen, verhindert aber die Stufen,
   die 8-Bit-Bildschirme bei dunklen Blautönen zeigen. */
.section.ink { background-color: var(--ink); background-image: url("img/rauschen.png"); color: var(--white); }
.section.tight { padding-top: clamp(56px, 7vw, 96px); }

/* Zweispaltig: Aussage links, Text rechts */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.split.wide-right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.prose p { margin: 0 0 16px; font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.prose p:last-child { margin-bottom: 0; }
.prose .btn, .prose .arrow-link { margin-top: 20px; }
.section.ink .prose p { color: var(--mist); }
.note { font-size: 15px !important; color: var(--stone) !important; }
.section.ink .note { color: var(--mist) !important; opacity: .8; }

/* Kopf eines Leistungsabschnitts */
.detail-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 32px; align-items: start; }
.detail-head .display { grid-column: 1 / -1; }
.detail-head .prose { grid-column: 2; }
.detail-head > * { min-width: 0; }

/* Leistungsliste mit Stichwort und Erläuterung */
.detail-list { margin: 48px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.detail-list > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 32px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
/* Trennung und Notumbruch: Wörter wie "Scheidungsfolgenvereinbarung" sind
   breiter als ein schmales Telefon (320 Pixel) und schoben die Seite sonst
   seitlich auf. */
.detail-list dt { font: 400 19px/1.35 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); hyphens: auto; overflow-wrap: break-word; }
.detail-list dd { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.detail-list dd a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.detail-list dd a:hover { text-decoration-thickness: 2px; }
.section.white .detail-list > div { border-color: #E6E6E6; }

/* Abschnitt mit mehreren Leistungsblöcken untereinander */
.field + .field { margin-top: clamp(72px, 9vw, 120px); }
.field-title { font-size: clamp(24px, 2.1vw, 32px); margin: 0; line-height: 1.2; }
h2.display.lead-gap, .lead-gap { margin-bottom: clamp(40px, 5vw, 64px); }

/* Ablauf: echte Reihenfolge, daher nummeriert */
.steps { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid var(--ink); padding-top: 22px; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 18px; font: 300 40px/1 var(--display); color: var(--ink); }
.steps h3 { margin: 0 0 10px; font: 400 20px/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.steps p { margin: 0; font-size: 16px; line-height: 1.58; color: var(--ink-soft); }

/* Rechtsgebiete der Startseite: breite Zeilen, Bild und Text versetzt */
.paths { display: grid; gap: clamp(72px, 9vw, 128px); margin-top: clamp(48px, 6vw, 80px); }
.path { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; text-decoration: none; color: var(--ink); }
.path.reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.path.reverse .media { order: 2; }
.path .media { overflow: hidden; aspect-ratio: 3 / 2; background-color: #d9d9d9; }
.path .media > div { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 1.2s var(--ease); }
.path:hover .media > div, .path:focus-visible .media > div { transform: scale(1.04); }
.path h3 { margin: 0 0 20px; font: 400 clamp(26px, 2.3vw, 34px)/1.15 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.path p { margin: 0 0 26px; max-width: 46ch; font-size: 18px; line-height: 1.65; color: var(--ink-soft); }

/* Standorte: zwei Karten nebeneinander */
.locations { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); }
/* Bild oben mit klarer Unterkante, Text darunter auf weißer Fläche. */
.location { display: block; overflow: hidden; text-decoration: none; color: var(--ink); background: var(--white); }
.location .media { display: block; aspect-ratio: 4 / 3; background-color: #d9d9d9; background-size: cover; background-position: center; transition: transform 1.2s var(--ease); }
.location:hover .media, .location:focus-visible .media { transform: scale(1.04); }
.location-text { padding: clamp(22px, 2.6vw, 34px); }
.location h3 { margin: 0 0 8px; font: 400 clamp(22px, 2vw, 30px)/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.location p { margin: 0 0 15px; font-size: 17px; line-height: 1.52; color: var(--ink-soft); }
.location .arrow-link { color: var(--ink); }

/* Grundsätze (Kanzlei) */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); margin-top: clamp(48px, 6vw, 72px); }
.principles h3 { margin: 0 0 14px; padding-top: 22px; border-top: 1px solid var(--ink); font: 400 22px/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.principles p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.section.ink .principles h3 { border-color: rgba(255,255,255,.35); color: var(--white); }
.section.ink .principles p { color: var(--mist); }

/* Person */
.prose .person-name { margin: 0 0 10px; font: 400 clamp(26px, 2.3vw, 34px)/1.15 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.prose .person-role { margin: 0 0 30px; font: 400 15px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }

/* Ansprechpartnerin: feststehendes Bildband, Text links auf eingefärbtem Bild */
.person-band .parallax-img { background-position: 54% top; will-change: auto; }
/* Heller Bildeindruck (Startseite) */
.person-band.hell { color: var(--ink); }
/* Das Portrait steht mittig im Foto. Der Ausschnitt wird deshalb vergrößert und
   links ausgerichtet, damit die Person rechts neben der Textspalte steht; der
   Abstand bleibt dabei über alle Fensterbreiten gleich. */
.person-band.hell .parallax-img { filter: brightness(1.07) saturate(1.08); left: 12%; right: -27%; background-size: cover; background-position: center 6%; }
/* Spaltenbreite und Schriftgrad so, dass „Ansprechpartnerin.“ in eine Zeile passt
   und nicht im Wort umbrochen wird. */
.person-band.hell .person-band-text { max-width: min(500px, 34vw); }
.person-band.hell h2.display { font-size: clamp(30px, 2.9vw, 44px); }
.person-band.hell::after { background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.90) 20%, rgba(255,255,255,.55) 32%, rgba(255,255,255,.16) 42%, rgba(255,255,255,.10) 60%, rgba(255,255,255,.10) 100%); }
.person-band.hell h2.display { color: var(--ink); }
.person-band.hell p { color: var(--ink-soft); }
.person-band.hell .arrow-link { color: var(--ink); }
/* Höhe an der Fensterbreite ausgerichtet, nicht an der Fensterhöhe: nur so
   bleibt der sichtbare Bildausschnitt gleich und das Kinn stets im Bild. */
.parallax.person-band { height: auto; min-height: clamp(560px, 47vw, 1120px); display: flex; align-items: center; color: var(--white); background: var(--ink-deep); }
/* Die Bildebene beginnt erst bei 12 Prozent, damit das Portrait rechts der
   Textspalte steht. Der Grundton dahinter entspricht dem unscharfen Hintergrund
   der Aufnahme, sodass links keine Kante sichtbar wird. */
.parallax.person-band.hell { background-color: #93ae9f; }
.person-band::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("img/rauschen.png"), linear-gradient(90deg, rgba(15,38,53,.92) 0%, rgba(15,38,53,.76) 42%, rgba(15,38,53,.30) 100%); }
.person-band-inner { position: relative; z-index: 2; width: 100%; padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px); }
.person-band-text { max-width: 540px; }
.person-band h2.display { margin-bottom: 32px; color: var(--white); }
.person-band p { margin: 0 0 16px; font-size: 18px; line-height: 1.65; color: var(--mist); }
.person-band .arrow-link { margin-top: 20px; color: var(--white); }
@media (min-width: 901px) and (max-width: 1200px) { .person-band .parallax-img { background-position: 44% top; } .person-band-text { max-width: 460px; } }

/* Bildbänder mit Parallaxe: Höhe und Versatz der Bildebene setzt site.js */
.parallax { position: relative; height: clamp(340px, 68vh, 680px); overflow: hidden; background: var(--ink-deep); }
.parallax-img { position: absolute; left: 0; right: 0; top: 0; height: 100%; background-size: cover; background-position: center; will-change: transform; }
.parallax-portrait { height: clamp(380px, 64vh, 600px); background: #8E9194; }
.parallax-portrait .parallax-img { background-position: 40% center; }
@media (max-width: 700px) { .parallax-portrait { height: clamp(360px, 56vh, 480px); } .parallax-portrait .parallax-img { background-position: 38% center; } }

/* Querverweise zwischen den Rechtsgebieten */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 64px); }
.choice { background: var(--paper); border-top: 3px solid var(--ink); padding: clamp(28px, 3.5vw, 48px); }
.section.white .choice { background: var(--paper); }
.choice h3 { margin: 0 0 18px; font: 400 clamp(22px, 1.9vw, 28px)/1.25 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.choice p { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.choice .arrow-link { color: var(--ink); }

/* Abschluss mit Gesprächsangebot */
.closing { padding: clamp(96px, 12vw, 160px) 0; text-align: center; }
.closing h2 { margin: 0 0 20px; font: 300 clamp(34px, 3.8vw, 58px)/1.15 var(--display); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.closing p { margin: 0 auto 40px; max-width: 48ch; font-size: 18px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Kontakt
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.contact-block { margin-bottom: 40px; }
.contact-block h2, .contact-block h3 { margin: 0 0 14px; font: 400 18px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.contact-block p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.contact-block a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.contact-block a:hover { border-color: var(--ink); color: var(--ink); }
.contact-info .contact-block:last-child { margin-bottom: 0; }
.contact-info .section-title { margin-bottom: 44px; }
.contact-block .contact-link { display: inline-block; margin-top: 22px; color: var(--ink); border-bottom: 1px solid currentColor; }

.form { background: var(--white); padding: clamp(28px, 4vw, 56px); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field-group { margin-bottom: 24px; }
.field-group label { display: block; margin-bottom: 8px; font: 400 14px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.field-group .optional { text-transform: none; letter-spacing: 0; font-family: var(--text); color: var(--stone); }
.field-group input, .field-group select, .field-group textarea { width: 100%; padding: 14px 16px; font: 400 17px/1.4 var(--text); color: var(--ink); background: var(--paper); border: 1px solid transparent; border-bottom-color: var(--ink); border-radius: 0; transition: border-color .2s, background-color .2s; }
.field-group select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231A3E54' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.field-group textarea { min-height: 180px; resize: vertical; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus { outline: none; background: var(--white); border-color: var(--ink); }
.field-group input:user-invalid, .field-group textarea:user-invalid { border-color: var(--error); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-hint { margin: 0 0 28px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.form-hint a { color: var(--ink); }
.form-status { margin: 0 0 28px; padding: 18px 20px; font-size: 16px; line-height: 1.6; border-left: 3px solid var(--ink); background: var(--paper); }
.form-status.error { border-color: var(--error); color: var(--error); }
.form-status[hidden] { display: none; }
/* Anklickbare Ziele im Lageplan */
.map-svg a { cursor: pointer; transform-box: fill-box; transform-origin: center;
  transition: transform .35s var(--ease), opacity .35s var(--ease), filter .35s var(--ease); }
.map-svg a:hover { opacity: .72; transform: translateY(-6px); filter: drop-shadow(0 9px 12px rgba(15,38,53,.3)); }
.map-svg a:active { transform: translateY(-2px); filter: drop-shadow(0 5px 7px rgba(15,38,53,.28)); }
.map-svg a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.form-status p { margin: 0; }
.form-status ul { margin: 8px 0 0; padding-left: 20px; }
.form-status li + li { margin-top: 4px; }
/* Beanstandete Felder bleiben markiert, bis sie berichtigt sind. */
.field-group input[aria-invalid="true"], .field-group textarea[aria-invalid="true"] { border-color: var(--error); background: var(--white); }
.check input[aria-invalid="true"] { border-color: var(--error); }

/* Rückrufwunsch */
.callback { margin: 4px 0 24px; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 17px; line-height: 1.5; color: var(--ink); }
.check input { appearance: none; flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; border: 1px solid var(--ink); border-radius: 3px; background: var(--paper); display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
.check input::after { content: ""; width: 6px; height: 11px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.check input:checked { background: var(--ink); }
.check input:checked::after { opacity: 1; }
.callback-time { margin: 18px 0 0; }
.callback-time[hidden] { display: none; }

/* Anfahrt mit statischer Karte */
.map-split { align-items: center; }
.map-figure { margin: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,.12); background: var(--white); }
.map-figure svg { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Honorar
   -------------------------------------------------------------------------- */
.rate-note { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 3vw, 40px); background: var(--paper); border-left: 3px solid var(--ink); }
.rate-note p { margin: 0 0 12px; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.rate-note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Rechtstexte
   -------------------------------------------------------------------------- */
.legal { max-width: 760px; }
/* Überschriften wie in den Kacheln: Oswald, gemischte Schreibung.
   h3 eine Stufe kleiner, damit die Gliederung der Rechtstexte ablesbar bleibt. */
.legal h2 { margin: 48px 0 14px; font: 400 clamp(23px, 1.9vw, 30px)/1.25 var(--marke); letter-spacing: var(--spur-titel); text-transform: none; color: var(--ink); }
.legal h3 { margin: 28px 0 10px; font: 400 clamp(18px, 1.35vw, 21px)/1.35 var(--marke); letter-spacing: var(--spur-titel); text-transform: none; color: var(--ink); }
.legal p, .legal li { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal a { color: var(--ink); }
.legal .placeholder { background: #FFF4CC; color: #6B5300; padding: 0 4px; }

/* --------------------------------------------------------------------------
   Fußzeile
   -------------------------------------------------------------------------- */
.site-footer { background-color: var(--ink); background-image: url("img/rauschen.png"); color: var(--mist); padding: clamp(56px, 7vw, 88px) 0 32px; font: 300 17px/1.6 var(--display); letter-spacing: .04em; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr)); gap: 40px; }
.site-footer .logo { color: var(--white); font-size: 36px; }
.site-footer h2 { margin: 0 0 14px; font: 400 14px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.site-footer p { margin: 0; line-height: 1.75; }
.site-footer ul { list-style: none; margin: 0; padding: 0; line-height: 2; }
.site-footer a { text-decoration: none; color: var(--mist); transition: color .2s; }
.site-footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: var(--mist); transition: color .25s, background-color .25s, border-color .25s; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--ink); background: var(--white); border-color: var(--white); text-decoration: none; }
.footer-social svg { width: 19px; height: 19px; fill: currentColor; }
.footer-mail { margin: 22px 0 0; font-size: 16px; letter-spacing: .05em; }
.footer-mail a { border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 2px; transition: border-color .2s, color .2s; }
.footer-mail a:hover { color: var(--white); border-color: rgba(255,255,255,.6); text-decoration: none; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: clamp(48px, 6vw, 72px); padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: 15px; color: rgba(220,229,234,.8); }
.footer-bottom nav { display: flex; gap: 28px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .principles { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --header-h: 76px; }
  .logo { font-size: 32px; }
  .menu-toggle { display: block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100svh - var(--header-h)); overflow-y: auto; background: var(--white); color: var(--ink); padding: 8px 20px 24px; box-shadow: 0 1px 0 var(--rule); }
  .nav.open { display: block; }
  .nav .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav .menu > li { border-bottom: 1px solid var(--rule); }
  .nav .menu > li > a { display: block; padding: 16px 0 8px; font-size: 16px; }
  .nav .menu > li > .sub-label { display: block; width: 100%; text-align: left; padding: 16px 0 8px; font-size: 16px; }
  .nav .menu > li > a::after { display: none; }
  .nav .menu > li > a[aria-current="page"], .nav .menu > li > a.current,
  .nav .menu > li > .sub-label.current { font-weight: 500; }
  .submenu { position: static; min-width: 0; padding: 0 0 12px; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; border-radius: 0; }
  .submenu::before { display: none; }
  .submenu a { padding: 7px 0 7px 14px; font: 400 16px/1.4 var(--text); letter-spacing: 0; color: var(--ink-soft); }
  .submenu a:hover, .submenu a:focus-visible { padding-left: 14px; background: transparent; color: var(--ink); }
  .hero::after { background: url("img/rauschen.png"), linear-gradient(180deg, rgba(15,38,53,.55) 0%, rgba(15,38,53,.86) 62%); }
  /* Mobil: das Bild steht oben, der Text darunter auf aufgehelltem Grund */
  /* Mobil liegt das Bild in einem eigenen Band, nicht über der ganzen
     Sektionshöhe. Sonst skaliert cover das Foto auf die volle Höhe des
     Abschnitts und der Kopf wird so groß, dass Mund und Kinn in den weißen
     Verlauf geraten. Bandhöhe und Ausschnitt sind so gewählt, dass das
     Gesicht vollständig im klaren Bereich liegt. */
  .hero.hell:not(.page) { --img-h: min(118vw, 520px); min-height: 0; background: var(--white); }
  .hero.hell:not(.page) .hero-img { bottom: auto; height: var(--img-h); }
  .hero.hell .hero-img.rechts { background-position: 78% top; }
  .hero.hell:not(.page)::after { background: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,.08) calc(var(--img-h) * .62), rgba(255,255,255,.93) var(--img-h), rgba(255,255,255,.97) 100%); }
  /* Unterseiten: Verlauf von oben nach unten, Schrift steht unten im Hellen */
  .hero.page.hell { min-height: max(430px, 58svh); }
  /* Der Verlauf setzt frueher ein als zuvor (20 statt 38 Prozent): Auf dem
     Telefon beginnt der Textblock weiter oben, und die Kennzeile stand sonst
     im schwaechsten Teil des Verlaufs - gemessen 1,5 bis 2,3 zu 1. */
  .hero.page.hell::after { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 20%, rgba(255,255,255,.80) 52%, rgba(255,255,255,.94) 76%, rgba(255,255,255,.97) 100%); }
  .hero.hell:not(.page) .wrap { padding-top: calc(var(--img-h) - 16px); padding-bottom: 72px; }
  .hero.hell h1 { font-size: clamp(32px, 9.6vw, 44px); max-width: none; }
  .hero.hell .lead { max-width: none; }
  .hero h1 { font-size: clamp(32px, 9.6vw, 44px); }
  .hero.page h1 { font-size: clamp(30px, 8.6vw, 40px); }
  .hero .lead, .page-head p { font-size: 17px; }
  .btn { flex: 1 1 100%; }
  .prose .btn, .closing .btn { flex: none; width: 100%; }
  .split, .split.wide-right, .contact-grid, .principles, .choice-grid, .locations { grid-template-columns: 1fr; }
  .path, .path.reverse { grid-template-columns: 1fr; gap: 28px; }
  .path.reverse .media { order: 0; }
  .paths { gap: 64px; }
  .detail-list > div, .detail-head { grid-template-columns: 1fr; }
  .detail-head .prose { grid-column: 1; }
  .parallax.person-band { display: block; min-height: 0; --img-h: min(100vw, 560px); }
  .person-band::after { background: url("img/rauschen.png"), linear-gradient(180deg, rgba(15,38,53,.10) 0, rgba(15,38,53,.25) calc(var(--img-h) - 160px), rgba(15,38,53,.94) var(--img-h), rgba(15,38,53,.94) 100%); }
  .person-band.hell::after { background: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,.14) calc(var(--img-h) - 170px), rgba(255,255,255,.95) var(--img-h), rgba(255,255,255,.98) 100%); }
  /* Die Bildebene endet mit dem Bildstreifen; sonst deckt sie den gesamten
     Abschnitt ab und das Gesicht wird stark vergrößert angeschnitten. */
  .person-band .parallax-img { height: var(--img-h); background-size: cover; background-position: 58% top; }
  /* Mobil ein engerer Ausschnitt: weniger Oberkörper, Kopf größer im Bild. */
  .person-band.hell .parallax-img { left: 0; right: 0; height: var(--img-h); background-size: 185% auto; background-position: 46% 4%; }
  .person-band.hell .person-band-text { max-width: none; }
  .person-band-inner { padding-top: calc(var(--img-h) - 40px); padding-bottom: 72px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 560px) {
  h2.display { font-size: clamp(22px, 7vw, 32px); }
  .steps, .footer-grid { grid-template-columns: 1fr; }
}

/* Druck: Rechtstexte und Kontaktdaten sauber auf Papier */
@media print {
  .site-header, .hero, .parallax, .closing, .skip-link, .footer-social, .map-figure { display: none !important; }
  body { background: #fff; }
  .section { padding: 12px 0; }
  .site-footer { background: #fff; color: #000; }
  .site-footer a { color: #000; }
}

/* --------------------------------------------------------------------------
   Kachelzeilen
   -------------------------------------------------------------------------- */
/* Kachelzeilen: das durchgehende Schema aller Seiten.
   Jede Zeile nimmt die volle Fensterbreite ein und besteht aus zwei
   gleich grossen Haelften. Das Bild fuellt seine Haelfte ganz aus, bis
   zum Bildschirmrand; der Text steht mittig in der anderen Haelfte, mit
   gleichem Abstand zum Bildschirmrand und zur Bildkante. */
.section.flush { padding: 0; }
.tiles { margin-top: 0; }
.section.ink .tile-kopf { background: transparent; color: var(--white); }
.section.ink .tile-kopf p { color: var(--mist); }
.section.ink .tile-kopf .arrow-link, .section.ink .tile-kopf .note { color: var(--mist); }
/* Oben und unten derselbe Abstand - wie in allen uebrigen Abschnitten.
   Zuvor war der untere Rand knapper gesetzt (5,5vw gegen 9vw). */
.tile-kopf { text-align: center; background: var(--paper); padding: clamp(76px, 9vw, 140px) var(--gutter); }
.tile-kopf h2.display { margin: 0 auto 24px; max-width: 34ch; }
/* Das letzte Element gibt seinen Abstand nach unten ab, sonst steht es
   tiefer im Kasten als der obere Rand hoch ist. */
.tile-kopf > h2.display:last-child,
.tile-kopf > p:last-child,
.tile-kopf > :last-child { margin-bottom: 0; }
/* Der Umbruch soll am Komma liegen, nicht nach "drei". Unterhalb von 360 px
   bricht die Zeile frei um, sonst liefe sie aus dem Satzspiegel. */
@media (min-width: 360px) { .tile-kopf h2 .zeile { white-space: nowrap; } }
.tile-kopf p + p { margin-top: 16px; }
.tile-kopf p { margin: 0 auto; max-width: 62ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: var(--ink-soft); }
.tile { display: flex; align-items: stretch; text-decoration: none; color: var(--ink); }
.tile.reverse { flex-direction: row-reverse; }
.tile > .tile-text, .tile > .tile-media { flex: 0 0 50%; width: 50%; max-width: 50%; }

.tile-text {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  align-content: center;
  padding: clamp(48px, 5.5vw, 92px) clamp(28px, 4vw, 96px);
}
.tile .arrow-link { justify-self: start; }

.tile h3 { margin: 0 0 18px; font: 400 clamp(23px, 1.9vw, 32px)/1.18 var(--display); letter-spacing: .05em; text-transform: uppercase; text-wrap: balance; hyphens: auto; }
.tile > .tile-text > p { margin: 0 0 18px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: var(--ink-soft); hyphens: auto; }
.runin { list-style: none; margin: 0 0 26px; padding: 0; }
.runin li { margin-bottom: 8px; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.58; color: var(--ink-soft); hyphens: auto; }
.runin b { font-weight: 600; color: var(--ink); }
.tile .arrow-link { font-size: clamp(14px, 1.05vw, 16px); }

.tile-media { overflow: hidden; min-height: clamp(320px, 32vw, 620px); background: #d9d9d9; }
.tile-media > div { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 1.2s var(--ease); }
.tile:hover .tile-media > div, .tile:focus-visible .tile-media > div { transform: scale(1.04); }

@media (max-width: 900px) {
  .tile, .tile.reverse { flex-direction: column; }
  .tile > .tile-text, .tile > .tile-media { flex: 0 0 auto; width: 100%; max-width: none; }
  .tile > .tile-media { order: -1; min-height: 0; aspect-ratio: 3 / 2; }
  .tile .tile-text, .tile.reverse .tile-text { grid-template-columns: minmax(0, 1fr); padding: 36px var(--gutter) 46px; }
  .tile-kopf { padding: 64px var(--gutter); }
}

/* Kachel mit Leistungsliste (Expertise-Seiten): einspaltig, damit die
   Stichwörter in der halben Fensterbreite nicht zerquetscht werden. */
.tile .detail-list { margin: 24px 0 26px; }
.tile .detail-list > div { grid-template-columns: 1fr; gap: 5px; padding: 15px 0; }
.tile .detail-list dt { font-size: 16px; letter-spacing: .07em; }
.tile .detail-list dd { font-size: 15px; line-height: 1.58; }
.tile .detail-list > div:last-child { border-bottom: 0; padding-bottom: 0; }


/* ==========================================================================
   Stand November 2026: Farbwerte, Menueband, Fusszeile, Verweiszeilen und
   Bildtafel. Bis zur Umstellung auf PHP standen diese Regeln in den
   einzelnen Seiten; seit die Seiten Kopf und Fuss gemeinsam einbinden,
   gehoeren sie hierher.
   ========================================================================== */
/* ---------------------------------------------------------------------------
   Uebernommen aus index.html (Stand 05.11.2026): Farbwerte, Menueband,
   Untermenue und Fusszeile. Solange nicht alle Unterseiten umgestellt sind,
   steht der Block hier; danach gehoert er nach site.css, damit alle Seiten
   ihn teilen und diese Kopie entfallen kann.
   --------------------------------------------------------------------------- */
:root { --panel: #33312D; --panel-deep: #262522; --on-panel: #E4E1DA; --fuss-schrift: #EAEAEA; }
.section.ink { background-color: var(--panel); }
.section.ink .prose p { color: var(--on-panel); }

/* Menueband weiss und durchscheinend beim Oeffnen, deckend weiss beim Scrollen;
   das Untermenue folgt dem Band, damit es nicht als deckende Platte daraus faellt. */
.site-header { background: rgba(255,255,255,.74); color: var(--ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-header.solid { background: var(--white); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header .logo .sub { opacity: .9; }
/* Das Untermenue ist in beiden Zustaenden deckend. Durchscheinend wuerde der
   Hintergrund hindurchwirken, und das Feld traege dort, wo es ueber dem
   Menueband liegt, einen anderen Ton als darunter. Statt Weiss ein leichtes
   Grau: so setzt es sich vom Band ab, ohne hart dagegen zu stehen. Blaue
   Schrift darauf 9,53 : 1. */
.submenu { background: #EAECEE; color: var(--ink); box-shadow: 0 12px 28px rgba(15,38,53,.14); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header.solid .submenu { background: #EAECEE; box-shadow: 0 14px 32px rgba(15,38,53,.18); -webkit-backdrop-filter: none; backdrop-filter: none; }
.submenu a, .site-header.solid .submenu a { color: var(--ink); }
.submenu a:hover, .submenu a:focus-visible,
.site-header.solid .submenu a:hover, .site-header.solid .submenu a:focus-visible { background: rgba(255,255,255,.72); color: var(--ink); }
@media (max-width: 900px) {
  .nav, .site-header.solid .nav { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
  .nav .menu > li, .site-header.solid .nav .menu > li { border-bottom-color: var(--rule); }
  .submenu, .site-header.solid .submenu { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Fusszeile auf #5B5A56, Schrift #EAEAEA (5,74 : 1). Weiss bleibt dem Hover. */
.site-footer { background-color: #5B5A56; color: var(--fuss-schrift); }
.site-footer p, .site-footer a, .footer-bottom { color: var(--fuss-schrift); }
.site-footer a:hover { color: var(--white); }
.site-footer .logo, .site-footer h2 { color: var(--fuss-schrift); }
.footer-bottom { border-top-color: rgba(234,234,234,.28); }
.footer-social a { border-color: rgba(234,234,234,.46); color: var(--fuss-schrift); }
.footer-social a:hover, .footer-social a:focus-visible { color: #5B5A56; background: var(--white); border-color: var(--white); }
@media (min-width: 1101px) { .footer-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); justify-items: center; } }
.site-footer .fuss-claim { margin-top: 28px; max-width: 34ch; font-size: 15px; line-height: 1.6; color: var(--fuss-schrift); }
.site-footer .fuss-reichweite { width: fit-content; margin: 28px 0 0; padding: 12px 0; border-top: 1px solid rgba(234,234,234,.18); border-bottom: 1px solid rgba(234,234,234,.18); color: var(--fuss-schrift); }
@media (max-width: 900px) { .site-footer .fuss-reichweite { width: auto; } }
.site-footer .fuss-reichweite + h2 { margin-top: 34px; }

/* ---------------------------------------------------------------------------
   Verweiszeilen im Abschnitt "Denken Sie weiter."

   Die beiden Karten sind ersetzt. Die Verweise stehen jetzt als Zeilen in
   derselben Teilung, die auf dieser Seite schon die Leistungslisten tragen
   (5 zu 7, Haarlinie darueber und darunter): links das Feld in der
   Versalschrift, rechts der Satz, aussen der Pfeil. So entsteht kein neues
   Layout-Element, sondern die vertraute Zeile - nur als ganzer Verweis
   anklickbar. Beruehrung: die untere Linie faerbt sich blau, der Pfeil
   wandert; eine Flaeche entsteht nicht.
   --------------------------------------------------------------------------- */
.weiter-kopf { text-align: center; }
.weiter-kopf h2.display { margin: 0 auto 24px; max-width: 34ch; }
.weiter-kopf p { margin: 0 auto; max-width: 62ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: var(--ink-soft); }
.verweise { margin-top: clamp(44px, 5.5vw, 76px); border-top: 1px solid var(--rule); }
.verweis { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) auto; align-items: center; gap: 10px 32px; padding: clamp(26px, 3vw, 38px) 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; transition: border-color .35s var(--ease); }
.verweis-feld { font: 400 clamp(20px, 1.6vw, 25px)/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); transition: color .35s var(--ease); }
.verweis-text { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.verweis-pfeil { display: inline-flex; color: var(--ink); }
.verweis-pfeil svg { transition: transform .35s var(--ease); }
.verweis:hover, .verweis:focus-visible { border-bottom-color: var(--ink); }
.verweis:hover .verweis-feld, .verweis:focus-visible .verweis-feld { color: var(--ink-deep); }
.verweis:hover .verweis-pfeil svg, .verweis:focus-visible .verweis-pfeil svg { transform: translateX(6px); }
.verweis:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
@media (max-width: 760px) {
  .verweis { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px 20px; }
  .verweis-feld { grid-column: 1; grid-row: 1; }
  .verweis-pfeil { grid-column: 2; grid-row: 1; align-self: center; }
  .verweis-text { grid-column: 1 / -1; grid-row: 2; }
}

/* Schlussabschnitt auf Weiss - nur dort, wo der Abschnitt davor auf dem
   Seitengrund steht; im Markup mit class="closing white". */
.closing.white { background: var(--white); }

/* Schlussabschnitt der Startseite: drei schwebende Flaechen nebeneinander */
.closing .actions { justify-content: center; margin-top: 4px; }
.btn-kontakt { text-transform: none; letter-spacing: .05em; font-size: 17px; background: var(--paper); }
.btn-kontakt:hover, .btn-kontakt:focus-visible { background: var(--paper); }
@media (max-width: 900px) { .closing .actions { flex-direction: column; align-items: stretch; } }

/* ---------------------------------------------------------------------------
   Bildtafel statt Parallaxe

   Das Portrait hat ueber dem Kopf nur 5,6 Prozent Bildhoehe. Jede senkrechte
   Bewegung schnitte den Kopf ab, deshalb steht das Bild fest und ist oben
   buendig gesetzt (background-position: center top): so bleibt die Luft ueber
   dem Kopf immer erhalten, unabhaengig von der Fensterbreite. Bewegung gibt es
   nur bei Beruehrung - das Bild zoomt langsam heran. Rechts, ueber der
   ruhigen Betonwand, stehen Rolle und Name.
   --------------------------------------------------------------------------- */
.person-tafel { position: relative; display: block; overflow: hidden; height: clamp(440px, 46vw, 760px); background-color: #9A9A9A; text-decoration: none; color: var(--ink); }
.person-tafel-img { position: absolute; inset: 0; background-size: cover; background-position: center top; transition: transform 1.6s var(--ease); }
.person-tafel:hover .person-tafel-img, .person-tafel:focus-visible .person-tafel-img { transform: scale(1.05); }
.person-tafel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(245,245,245,.96) 0%, rgba(245,245,245,.88) 26%, rgba(245,245,245,0) 62%); }
.person-tafel > .wrap { position: relative; z-index: 2; height: 100%; }
/* Rolle und Name sitzen nicht mittig, sondern mit ihrer Mitte bei zwei Dritteln
   der Bandhoehe - also ein Drittel ueber der Unterkante. */
.person-tafel-text { position: absolute; top: 66.667%; right: var(--gutter); transform: translateY(-50%); max-width: 420px; text-align: right; }
.person-tafel .rolle { margin: 0 0 14px; font: 400 15px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
.person-tafel h2.display { margin: 0; max-width: none; }
.person-tafel:focus-visible { outline: 2px solid var(--ink); outline-offset: -8px; }
@media (max-width: 760px) {
  .person-tafel { height: clamp(400px, 104vw, 560px); }
  .person-tafel-img { background-position: 26% top; }
  .person-tafel::after { background: linear-gradient(0deg, rgba(245,245,245,.96) 0%, rgba(245,245,245,.82) 24%, rgba(245,245,245,0) 56%); }
  .person-tafel > .wrap { display: flex; align-items: flex-end; justify-content: flex-start; padding-bottom: clamp(28px, 7vw, 48px); }
  .person-tafel-text { position: static; transform: none; text-align: left; }
}

/* Abstand zwischen Text und Verweis in den mittigen Kopfzeilen */
.tile-kopf .arrow-link { margin-top: 30px; }


/* ==========================================================================
   Gestaltung ab November 2026

   Drei Rollen, drei Schriften:
     Ueberschriften      Newsreader (Antiqua), Gemischtsatz
     Lesetext            Source Sans Pro, in zwei Graden
     Marke und Labels    Oswald - Logo, Menue, Fusszeile, Schaltflaechen,
                         Verweise und Kennzeilen

   Die beiden Lesegrade steuert das Stylesheet selbst: Der jeweils erste
   Absatz eines Textblocks steht gross, alle weiteren klein. Im Markup sind
   dafuer keine Klassen noetig - deshalb genuegt es, die Werte hier zu
   aendern, um das Schriftbild der ganzen Seite zu verschieben.

   Ueber jeder Hauptueberschrift steht eine Kennzeile: ein Strich von 40
   Pixeln und ein Schlagwort in Versalien. Im Markup ist das eine Zeile
   <div class="eyebrow">Wort</div>; alles Weitere regelt dieses Stylesheet.
   Im Kopfbereich traegt die Kennzeile dieselbe Form.

   Portraitaufnahmen tragen keine Aufhellung und keine Rauschtextur mehr; nur
   das Heranfahren beim Laden bleibt. Ganz ohne Verlauf stehen die beiden
   Aufnahmen der Startseite - portrait-profil-desktop und
   portrait-band-desktop sind eigens so beschnitten, dass die Schrift auf
   einer ruhigen Flaeche sitzt. Auf der Seite Diana Hofmann und in der
   Bildtafel der Kanzlei-Seite bleibt ein heller Schleier stehen: dort steht
   die Schrift sonst auf 3,1 statt 6,4 beziehungsweise 3,7 statt 9,6 zu eins
   und ist nicht mehr lesbar. Sobald es von diesen beiden Motiven ebenfalls
   einen Beschnitt mit ruhiger Flaeche gibt, kann der Schleier dort entfallen
   (.hero.page.hell::after und .person-tafel::after).
   ========================================================================== */

/* --- Marke und Labels in Oswald ----------------------------------------- */
.logo, .logo .word, .logo .sub,
.site-header, .nav, .nav .menu > li > a, .nav .menu > li > .sub-label, .submenu a,
.site-footer, .site-footer p, .site-footer a, .site-footer h2, .footer-bottom,
.btn, .arrow-link, .contact-link, .eyebrow, .hero .eyebrow {
  font-family: var(--marke);
}

/* --- Ueberschriften ------------------------------------------------------ */
.hero h1, h2.display, .closing h2, .page-head h1, .person-band h2.display {
  text-transform: none; letter-spacing: -.012em; font-weight: 300; text-wrap: balance;
}
/* Der Hoechstgrad ist durch die Spaltenbreite gebunden, nicht durch den
   Geschmack: Rechts vom Text steht das Portrait, die Textspalte misst auch
   auf sehr breiten Schirmen nur rund 670 Pixel. */
.hero.hell h1, .hero.page h1, .hero h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.12; }
/* Schmale Fenster. Jede Zeile der Kopfzeile sitzt in einer Maske, die den
   Einblendeffekt traegt (.hero h1 .line, overflow: hidden) und genau eine
   Zeile hoch ist: Was nicht in die Breite passt, wird deshalb nicht
   umgebrochen, sondern abgeschnitten. Die laengste Zeile im Bestand ist
   "Partnerschaft gestalten." auf der Seite Ehe, Familie und Partnerschaft;
   sie braucht rund 10,5 Pixel Satzbreite je Pixel Schriftgrad. Der Grad
   bleibt deshalb unterhalb von 901 Pixeln an die Fensterbreite gebunden.
   Diese Regel ersetzt die gleichlautende weiter oben im Stylesheet
   (Abschnitt "Telefon und Tablet"), die hier sonst ueberschrieben wuerde. */
@media (max-width: 900px) {
  .hero.hell h1, .hero.page h1, .hero h1 { font-size: clamp(25px, 8vw, 44px); }
}
.page-head h1 { font-size: clamp(36px, 4vw, 62px); line-height: 1.14; }
h2.display { font-size: clamp(31px, 3.3vw, 50px); line-height: 1.18; }
.closing h2 { font-size: clamp(33px, 3.6vw, 55px); line-height: 1.14; }
/* Kachelueberschriften: kein eigener Schriftcharakter, sondern Lesetext in
   Fett und Blau. */
/* Kachelueberschriften in der Marken-Schrift. Oswald laeuft schmal, der
   Grad liegt deshalb etwas hoeher als beim Lesetext-Satz zuvor. */
.tile h3 { font-family: var(--marke); font-weight: 400; font-size: clamp(23px, 1.9vw, 30px); line-height: 1.22; letter-spacing: var(--spur-titel); text-transform: none; color: var(--ink); }

/* Textlinks stehen im Gemischtsatz - Versalien lassen eine Zeile wie
   "Zum Rechtsgebiet" wie eine Schaltflaeche aussehen. Die Schaltflaechen
   selbst (.btn) behalten ihre Versalien, damit beide unterscheidbar
   bleiben. */
.arrow-link, .contact-link {
  text-transform: none;
  letter-spacing: var(--spur-link);
  font-size: clamp(16px, 1.15vw, 18px);
}
.tile .arrow-link { font-size: clamp(15px, 1.1vw, 17px); }

/* Die Aufzaehlungen in den Kacheln der Rechtsgebietsseiten folgen der Form
   der Startseite: Stichwort mit Doppelpunkt halbfett in Blau, der Text
   laeuft in derselben Zeile weiter - keine zweite Spalte, keine
   Trennlinien. Der Doppelpunkt kommt aus dem Stylesheet, im Text steht er
   nicht. */
.tile .detail-list { margin: 0 0 26px; border-top: 0; }
.tile .detail-list > div { display: block; padding: 0; margin-bottom: 7px; border-bottom: 0; }
.tile .detail-list dt {
  display: inline; font-family: var(--text); font-weight: 600;
  font-size: var(--klein); line-height: 1.55; letter-spacing: 0;
  text-transform: none; color: var(--ink);
}
.tile .detail-list dt::after { content: ": "; white-space: pre; }
.tile .detail-list dd {
  display: inline; margin: 0;
  font-size: var(--klein); line-height: 1.55; color: var(--ink-soft);
}

/* Die drei Grundsaetze auf der Kanzlei-Seite stehen in derselben Form wie
   die Kachelueberschriften. */
.principles h3 {
  font-family: var(--marke); font-weight: 400;
  font-size: clamp(21px, 1.6vw, 25px); line-height: 1.26;
  letter-spacing: var(--spur-titel); text-transform: none;
}

/* Die Blockueberschriften der Kontaktseite folgen derselben Form wie die
   Grundsaetze auf der Kanzlei-Seite. Im Formular steht der Feldname in
   derselben Schrift, aber deutlich kleiner: Er beschriftet ein Eingabefeld
   und ist keine Ueberschrift. */
.contact-block h2, .contact-block h3 {
  margin: 0 0 14px;
  font-family: var(--marke); font-weight: 400;
  font-size: clamp(21px, 1.6vw, 25px); line-height: 1.26;
  letter-spacing: var(--spur-titel); text-transform: none; color: var(--ink);
}
.field-group label {
  font-family: var(--marke); font-weight: 400;
  font-size: 16px; line-height: 1.3;
  letter-spacing: var(--spur-titel); text-transform: none; color: var(--ink);
}
/* Der Aktionslink in einem Kontaktblock ist derselbe Pfeil-Link wie ueberall
   sonst; die allgemeine Linienfarbe der Blocklinks gilt fuer ihn nicht. */
.contact-block .arrow-link { margin-top: 22px; border-bottom-color: currentColor; }

/* Eigennamen auf einer Schaltflaeche behalten ihre Schreibweise -
   "EVANDO Consulting" ist ein Name, keine Handlungsaufforderung. */
.btn.btn-name { text-transform: none; letter-spacing: .05em; }

/* Die Querverweise am Fuss der Rechtsgebietsseiten tragen dieselben Namen
   wie die Kacheln und folgen deshalb derselben Form. */
.verweis-feld { font-family: var(--marke); font-weight: 400; font-size: clamp(21px, 1.7vw, 27px); letter-spacing: var(--spur-titel); text-transform: none; }

/* Schlusszeile: Steht die Ueberschrift aus zwei Saetzen, bekommt jeder
   Satz am Schreibtisch seine eigene Zeile; auf dem Telefon laufen sie
   weiter um, weil zwei feste Zeilen dort zu schmal wuerden. */
@media (min-width: 901px) {
  h2 .satz { display: block; }
}

/* --- Zwei Lesegrade ------------------------------------------------------ */
/* Ein einziger Schnitt (400): Source Sans Pro kennt kein 500, ein
   gerechneter Zwischenschnitt wirkte im Kopf dicker als der uebrige Text. */
.hero .lead, .page-head p, .prose p, .tile-kopf p, .weiter-kopf p, .tile-text p,
.person-band-text p, .closing p, .runin, .runin li { font-weight: 400; }

/* Gross: der Einstieg eines Blocks. Klein: alles Weitere. */
.hero .lead, .page-head p,
.prose > p:first-of-type,
.tile-kopf > p:first-of-type,
.weiter-kopf > p:first-of-type,
.tile-text > p:first-of-type,
.closing p { font-size: var(--gross); line-height: 1.45; }

.prose > p:not(:first-of-type),
.tile-kopf > p:not(:first-of-type),
.weiter-kopf > p:not(:first-of-type),
.tile-text > p:not(:first-of-type),
.person-band-text p,
.detail-list dd, .principles p, .location p, .contact-block p, .verweis-text,
.runin, .runin li { font-size: var(--klein); line-height: 1.55; }

/* Abstaende nur dort, wo ein weiterer Absatz folgt. Die groesseren Abstaende
   vor Schaltflaechen bleiben unberuehrt. */
.prose p, .tile-kopf p, .weiter-kopf p, .person-band-text p { margin-bottom: 14px; }
.runin li { margin-bottom: 7px; }
.prose p:last-child, .tile-kopf p:last-child, .weiter-kopf p:last-child,
.person-band-text p:last-child { margin-bottom: 0; }

/* Stichwoerter in den Kachellisten: Lesetext, eine Stufe kraeftiger, in Blau.
   Zwischen 400 und 600 hat Source Sans Pro keinen Schnitt. */
.runin b { font-family: var(--text); font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; }

/* --- Kennzeile mit Strich ------------------------------------------------ */
/* Die Kennzeile im Kopfbereich bringt eigene Werte mit (.hero .eyebrow) und
   muss deshalb ausdruecklich mitbenannt werden. */
.eyebrow, .hero .eyebrow, .page-head .eyebrow {
  display: flex; align-items: center; gap: 16px; margin: 0 0 22px; max-width: none;
  font: 400 14px/1.3 var(--marke); letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone);
}
.eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .6; flex: none; }
.eyebrow.center { justify-content: center; margin-left: auto; margin-right: auto; }
.eyebrow.center::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .6; flex: none; }
/* Im Kopfbereich steht die Kennzeile auf einem Foto, nicht auf einer ruhigen
   Flaeche. Das helle Grau reichte dort nicht: auf der Goldgasse-Aufnahme nur
   2,9:1, auf dem Telefon 1,7:1. Der dunklere Ton bringt sie ueber die
   Schwelle, ohne lauter zu werden als die Ueberschrift darunter. */
.hero.hell .eyebrow { color: var(--ink-soft); }
.page-head .eyebrow { color: var(--stone); }
.person-band-text .eyebrow { color: var(--ink-soft); }
/* Im zweispaltigen Satz stehen Kennzeile und Ueberschrift zusammen, damit
   das Raster weiterhin genau zwei Spalten bekommt. */
.split-kopf { align-self: start; }
.split-kopf h2.display { margin: 0; }

/* --- Verweise: Hover in der Farbe der Fusszeile -------------------------- */
.arrow-link:hover, .arrow-link:focus-visible,
.tile:hover .arrow-link, .tile:focus-visible .arrow-link,
.prose a:not(.btn):hover, .section a:not(.btn):not(.tile):hover,
.contact-link:hover,
.verweis:hover .verweis-feld, .verweis:hover .verweis-text {
  color: var(--hover); border-bottom-color: var(--hover);
}
/* Schaltflaechen sind von dieser Regel ausgenommen: Sie fuellen sich beim
   Hover mit derselben Farbe, ihre Schrift muss dann weiss bleiben. */
.arrow-link:hover svg path, .arrow-link:focus-visible svg path,
.tile:hover .arrow-link svg path, .tile:focus-visible .arrow-link svg path,
.verweis:hover .verweis-pfeil svg path { stroke: var(--hover); }
.verweis:hover, .verweis:focus-visible { border-bottom-color: var(--hover); }

/* --- Portraitaufnahmen: nur das Heranfahren beim Laden -------------------- */
.hero.hell .hero-img,
.person-band.hell .parallax-img,
.person-tafel-img { filter: none; }
.person-band::after,
.person-band.hell::after { background: none; }

@media (min-width: 901px) {
  /* Am Schreibtisch steht der eigens beschnittene Ausschnitt; die Schrift
     sitzt links auf ruhiger Flaeche, der Verlauf entfaellt. */
  .hero.hell:not(.page) .hero-img { background-image: url("img/portrait-profil-desktop.webp"); }
  .hero.hell:not(.page)::after { background: none; }
}
/* Auf dem Telefon steht dagegen das unbeschnittene Portrait, und die
   Kopfzeile beginnt noch im Bild. Ohne Verlauf stuende ihre erste Zeile mit
   1,7 zu 1 auf dem dunklen Sakko - unlesbar. Der Verlauf ist der aus
   Fassung 12: spaet beginnend, hart auslaufend. */
@media (max-width: 900px) {
  .hero.hell:not(.page)::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,0) calc(var(--img-h) * .78),
      rgba(255,255,255,.95) calc(var(--img-h) * .98),
      rgba(255,255,255,.97) 100%);
  }
}
.person-band .parallax-img,
.person-band.hell .parallax-img {
  background-image: url("img/portrait-band-desktop.webp");
  left: 0; right: 0; background-position: center top; background-size: cover;
}
.js .person-band .parallax-img { transform: scale(1.12); opacity: .4; }
.loaded .person-band .parallax-img { transform: scale(1); opacity: 1; transition: transform 3.2s var(--ease), opacity 1.4s ease; }

/* --- Seitenfuss ---------------------------------------------------------- */
/* Das Logo ist kein Textlink: Beim Ueberfahren wechselt nur die Farbe auf
   Weiss, ohne Unterstreichung. Die uebrigen Fusszeilen-Links behalten sie. */
.site-footer .logo:hover, .site-footer .logo:focus-visible {
  color: var(--white); text-decoration: none;
}
/* Zusatz hinter einer Fusszeilen-Ueberschrift, etwa "(Zweigstelle)": in
   Gemischtsatz und etwas leiser als die Versalien davor. */
.site-footer h2 .zusatz {
  text-transform: none; letter-spacing: .02em; font-weight: 300; opacity: .82;
}

/* Lange Kopfzeilen. Die Zeilenmaske bricht nicht um, sondern schneidet ab;
   eine Kopfzeile mit mehr als etwa 20 Zeichen je Zeile braucht deshalb einen
   kleineren Grad. Gemessen an "Recht, das zusammenhält." - rund 10,3 Pixel
   Satzbreite je Pixel Schriftgrad. */
.hero.hell h1.lange-zeile, .hero.page h1.lange-zeile, .hero h1.lange-zeile {
  font-size: clamp(37px, 4.25vw, 61px);
}
@media (max-width: 900px) {
  .hero.hell h1.lange-zeile, .hero.page h1.lange-zeile, .hero h1.lange-zeile {
    font-size: clamp(24px, 7.4vw, 42px);
  }
}

/* Die Grundsaetze stehen seit dem vierten Eintrag in zwei Spalten statt in
   drei - vier Eintraege ergaeben sonst eine Reihe aus dreien und einem
   einzelnen. */
@media (min-width: 901px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ein stehengebliebener alter Sprungpunkt: Verweise auf #netzwerk sollen
   weiter beim Verbund landen, auch wenn der Abschnitt jetzt anders heisst. */
.alt-anker { display: block; height: 0; overflow: hidden; }

/* --- Dunkler Abschnitt --------------------------------------------------- */
/* Fuer Inhalte, die als eigenes Angebot gelesen werden sollen. Der Grund ist
   das Markenblau mit der feinen Rauschstruktur; der Farbwechsel traegt die
   Botschaft, nicht eine groessere Schrift. Gemessene Kontraste auf #1A3E54:
   Ueberschrift weiss 11,0:1, Fliesstext #DCE5EA 8,6:1, Kennzeile 6,4:1. */
.section.ink { background-color: var(--ink); }
.section.ink h2.display, .section.ink h3 { color: var(--white); }
.section.ink .eyebrow { color: var(--mist); opacity: .85; }
.section.ink .prose > p:first-of-type,
.section.ink .prose > p:not(:first-of-type) { color: var(--mist); }

/* --- Portraettafel ------------------------------------------------------- */
/* Der Textblock steht rechtsbuendig; die Kennzeile dreht deshalb ihren
   Strich auf die rechte Seite. Die Rollenbezeichnung steht jetzt unter dem
   Namen, nicht mehr darueber. */
.person-tafel-text { text-align: left; }
.person-tafel .eyebrow { margin: 0 0 18px; }
/* Die Rollenbezeichnung steht unter dem Namen und traegt dieselbe Form wie
   die Kennzeile darueber - gleiche Schrift, gleiche Sperrung, gleicher Grad.
   Nur der Strich fehlt, der gehoert zur Kennzeile. */
.person-tafel .rolle {
  margin: 14px 0 0;
  font-family: var(--marke); font-size: 14px; line-height: 1.3;
}

/* --- Zweispaltiger Satz: Ueberschrift links, Text rechts ----------------- */
/* Die Ueberschriftenspalte richtet sich nach der Ueberschrift und nicht nach
   einem festen Anteil der Breite. Zuvor war sie immer 6 von 11 Spalten breit;
   bei einer kurzen Ueberschrift wie "Zur Person." klaffte dadurch eine Luecke
   von ueber 400 Pixeln. fit-content waechst mit der Ueberschrift und wird bei
   34 Prozent gedeckelt, damit eine lange Ueberschrift die Textspalte nicht
   erdrueckt; der Lesetext bekommt zugleich ein Maximum, damit die Zeilen
   nicht zu lang werden. Nur am Schreibtisch - schmale Fenster setzen beide
   Spalten ohnehin untereinander. */
@media (min-width: 901px) {
  .split { grid-template-columns: fit-content(34%) minmax(0, 1fr); gap: clamp(36px, 4vw, 72px); }
  .split.wide-right { grid-template-columns: fit-content(30%) minmax(0, 1fr); }
  /* Der Lesetext schliesst rechts mit dem Raster ab, nicht irgendwo in der
     Flaeche: Er steht am rechten Rand seiner Spalte (margin-left: auto) und
     ist auf 78 Zeichen begrenzt, damit die Zeilen lesbar bleiben. Was
     uebrig bleibt, geht in den Abstand zur Ueberschrift - der ist damit
     beweglich, waehrend beide Kanten stehen. Da die Ueberschriftenspalte
     bei 34 Prozent gedeckelt ist, beginnt der Lesetext in allen
     Abschnitten auf derselben Achse. */
  .split .prose { max-width: 78ch; margin-left: auto; }
}

/* Hoehe des Bandes und Stand des Textes.
   Das Band ist niedriger als die uebrigen Bildbaender, weil es neben dem
   Text steht und nicht fuer sich wirken muss. Der Textblock sitzt nicht
   mittig, sondern mit seiner Mitte auf zwei Dritteln der Hoehe - also ein
   Drittel ueber der Unterkante. Dafuer steht er am Schreibtisch absolut;
   auf schmalen Fenstern laeuft er ohnehin unter dem Bild im Fluss. */
.parallax.person-band { min-height: clamp(520px, 38vw, 820px); }
@media (min-width: 901px) {
  .person-band .person-band-inner {
    position: absolute; left: 0; right: 0;
    top: 66.667%; transform: translateY(-50%);
  }
}

/* Auf dem Telefon steht das Bild nicht hinter dem Text, sondern ueber ihm:
   Es fuellt den oberen Teil des Abschnitts, der Text folgt darunter.
   Deshalb hier der unbeschnittene Querschnitt, ein weisser Verlauf im
   unteren Bildbereich - die Ueberschrift ragt dort hinein - und eine
   weisse Flaeche unter dem Bild statt des gruenen Grundtons. */
@media (max-width: 900px) {
  .parallax.person-band.hell { background-color: var(--white); }
  .person-band.hell .parallax-img { background-image: url("img/portrait-band.webp"); }
  .person-band.hell::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,0) 0,
      rgba(255,255,255,.12) calc(var(--img-h) - 180px),
      rgba(255,255,255,.95) var(--img-h),
      #FFF 100%);
  }
}

/* --- Bildausschnitt je Motiv -------------------------------------------- */
/* Die Kachelbilder werden formatfuellend beschnitten. Welcher Teil stehen
   bleibt, steuert --fokus; ohne Angabe bleibt die Mitte. sessel.webp hat
   sein Motiv am linken Rand und rechts eine leere Betonwand - zentriert
   wuerde der linke Sessel angeschnitten. */
.tile-media > div { background-position: var(--fokus, center); }
.img-sessel { --fokus: left center; }

/* Farbstimmung: sessel.webp kam kuehl aus der Kamera (Rot minus Blau -15),
   die uebrigen Kachelbilder sind warm (raum +5,5 / pflanze +5,8).
   sessel-warm.webp ist dieselbe Aufnahme mit angeglichener Farbbalance
   (Rot minus Blau +5,1). Zurueck zum Original: in der naechsten Zeile
   "sessel-warm" durch "sessel" ersetzen. */
.img-sessel { background-image: url("img/sessel-warm.webp"); }

/* --- Schaltflaechen: Schweben und Farbwechsel zugleich ------------------- */
.btn { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn-ink-solid:hover, .btn-ink-solid:focus-visible,
.btn-ink:hover, .btn-ink:focus-visible,
.btn-kontakt:hover, .btn-kontakt:focus-visible { background: var(--hover); border-color: var(--hover); color: var(--white); }