/* Autorecht-Kanzlei Frings-Neß, Bonn. Gestaltung aus der Vorlage „standard“ (Marginalien-Editorial,
   Systemschriften, keine Webfonts). Startseite bettet diese Datei ein, Unterseiten verlinken sie.
   Ab „Ergänzungen Frings-Neß“: Unterseiten, Schwerpunkt-Verweise, Kontaktformular, Fußnavigation. */
:root {
  /* Farbe: warmes Papier, tiefes Grün als einziger Akzent */
  --paper:      #FBFAF7;
  --paper-sunk: #F3F0E9;
  --ink:        #1A1917;
  --ink-muted:  #5A564E;
  --accent:     #26372E;
  --accent-ink: #EFEDE4;
  --rule:       #DDD8CD;
  --rule-soft:  #E8E4DA;

  /* Schrift */
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text",
           Cambria, Georgia, "Noto Serif", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, sans-serif;

  /* Abstandsskala, 4px-Basis. Nichts außerhalb dieser Skala. */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  /* Bewegung: eine Kurve, zwei Dauern. Mehr braucht die Seite nicht. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.22s;
  --t-slow: 0.7s;

  /* Bandabstand, skaliert mit dem Viewport, bleibt aber gerastert */
  --band-y: clamp(3.5rem, 8vw, 7rem);
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
}

*, *::before, *::after { 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-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.inverted :focus-visible { outline-color: var(--accent-ink); }

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

.skip {
  position: absolute; left: var(--s4); top: var(--s4);
  transform: translateY(-200%);
  background: var(--accent); color: var(--accent-ink);
  padding: var(--s3) var(--s5); text-decoration: none;
  font-family: var(--sans); font-size: 0.875rem;
  z-index: 100;
}
.skip:focus { transform: none; }

/* ── Raster ──────────────────────────────────────────────────────── */

.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
  /* Hebt allen Inhalt über die Lichtebene. Das Licht fällt dadurch auf
     die Flächen der Seite, aber nie auf die Schrift, sodass es keinen
     einzigen Kontrastwert verändern kann. */
  position: relative; z-index: 3;
}

/* ── Licht am Zeiger ─────────────────────────────────────────────
   Liegt über den Flächen der Bänder und unter allem Text. Nur auf
   Geräten mit echtem Zeiger, und aus, wenn reduzierte Bewegung
   gewünscht ist. */
.glow { display: none; }

@media (hover: hover) and (pointer: fine) {
  .glow {
    display: block;
    position: fixed; top: 0; left: 0;
    width: 32rem; height: 32rem;
    margin: -16rem 0 0 -16rem;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease);
    /* Kein Helligkeits-Mischmodus: auf fast weißem Papier lässt sich
       Helligkeit nicht steigern, dort wirkt nur eine Verschiebung ins
       Warme. Ein warmer Sandton deckt beide Gründe ab, er wärmt das
       Papier und hellt das dunkle Band auf. */
    background: radial-gradient(circle closest-side,
      rgba(198, 168, 112, 0.20) 0%,
      rgba(198, 168, 112, 0.15) 26%,
      rgba(198, 168, 112, 0.07) 52%,
      rgba(198, 168, 112, 0.02) 72%,
      transparent 86%);
    will-change: transform;
  }
  body.glow-on .glow { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .glow { display: none !important; }
}

/* Das durchgehende Gestaltungsmittel der Seite: eine schmale
   Marginalspalte links, in der die Abschnittsmarke steht, und die
   Inhaltsspalte rechts. Alle Bänder teilen dieses Raster, die Inhalte
   darin sind bewusst unterschiedlich gebaut. */
.band {
  border-top: 1px solid var(--rule);
  padding-block: var(--band-y);
}
.band:first-of-type { border-top: 0; }

.band__grid {
  display: grid;
  gap: var(--s5);
}
@media (min-width: 56rem) {
  .band__grid {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--s7);
  }
}

.mark {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
  padding-top: 0.4rem;
}
/* 0.75 statt 0.62: Das Licht am Zeiger liegt über der Bandfläche und
   hellt sie im Kern bis etwa #464E3B auf. Die Schrift auf dem dunklen
   Band braucht deshalb Reserve, sonst reißt sie dort 4,5:1. */
.inverted .mark { color: rgba(239, 237, 228, 0.75); }

/* Der Strich über der Abschnittsmarke zieht sich auf, wenn das Band
   in den Blick kommt. Das ist die einzige Bewegung, die sich
   wiederholt, und sie markiert den Anfang eines Abschnitts. */
.mark::before {
  content: "";
  display: block;
  width: 100%; height: 1px;
  margin-bottom: var(--s3);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease);
}
.inverted .mark::before { background: rgba(239, 237, 228, 0.45); }
.is-in .mark::before { transform: scaleX(1); }

/* ── Kopfzeile ───────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
.top__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  min-height: 3.75rem;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding-block: var(--s3);
  white-space: nowrap;
}
.wordmark b { font-weight: 600; }
.wordmark span {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: var(--s2);
}
@media (max-width: 30rem) { .wordmark span { display: none; } }

/* Die Nummer in der Kopfzeile ist der wichtigste Klick der Seite.
   Mindestens 44x44 Punkte, auf jedem Gerät sichtbar. */
.top__tel {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  min-height: 2.75rem;
  padding: var(--s2) var(--s4);
  background: var(--accent); color: var(--accent-ink);
  text-decoration: none;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}
.top__tel:hover { background: #1B2A22; }
.top__tel svg { flex: none; }
.top__tel span { white-space: nowrap; }

/* ── Auftakt ─────────────────────────────────────────────────────── */

.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) var(--band-y); }

.hero__grid {
  display: grid;
  gap: var(--s6);
  align-items: start;
}
@media (min-width: 56rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: var(--s8);
    align-items: end;
  }
}

.hero__eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s4);
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.75rem, 8.5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s5);
  text-wrap: balance;
}

.hero__lead {
  font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
  line-height: 1.55;
  max-width: 36ch;
  margin: 0 0 var(--s6);
  color: var(--ink);
}
.hero__lead b { font-weight: 600; }

.hero__act {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s4) var(--s5);
}

.telcta {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1) var(--s3);
  min-height: 3.25rem;
  padding: var(--s3) var(--s5);
  background: var(--accent); color: var(--accent-ink);
  text-decoration: none;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600; letter-spacing: 0.01em;
}
.telcta__num { white-space: nowrap; }
.telcta small {
  font-family: var(--sans);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.72;
}
.telcta:hover { background: #1B2A22; }

.hero__alt {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--sans); font-size: 0.9375rem;
  color: var(--ink-muted);
}
/* Eigenes Tap-Ziel von 44px Höhe, ohne die Zeile optisch zu vergrößern. */
.hero__alt a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  color: var(--ink); text-underline-offset: 3px;
}
.hero__alt a:hover { color: var(--accent); }

.hero__promise {
  margin: var(--s6) 0 0;
  font-family: var(--sans); font-size: 0.875rem;
  color: var(--ink-muted);
  max-width: 44ch;
}

.portrait { margin: 0; }
.portrait img {
  width: 100%;
  filter: saturate(0.92);
}
.portrait figcaption {
  margin-top: var(--s3);
  font-family: var(--sans); font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
@media (max-width: 55.999rem) {
  .portrait { max-width: 15rem; margin-top: var(--s2); }
}

/* ── Rechtsgebiete ───────────────────────────────────────────────── */

.fields { margin: 0; }

.field {
  border-top: 1px solid var(--rule-soft);
  padding-block: var(--s5);
}
.field:first-child { border-top: 0; padding-top: 0; }
.field:last-child { padding-bottom: 0; }

@media (min-width: 44rem) {
  .field {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--s3) var(--s6);
    align-items: baseline;
  }
}

.field__name {
  font-family: var(--serif);
  font-size: 1.1875rem; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.008em;
  margin: 0 0 var(--s1);
}
.field__law {
  font-family: var(--sans);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.field__body {
  margin: 0;
  max-width: 52ch;
  color: var(--ink);
}
.field__note {
  display: block; margin-top: var(--s2);
  font-family: var(--sans); font-size: 0.875rem;
  color: var(--ink-muted);
}
@media (max-width: 43.999rem) {
  .field__body { margin-top: var(--s3); }
}

/* ── Bußgeldlotse, umgekehrtes Band ──────────────────────────────── */

.inverted {
  background: var(--accent);
  color: var(--accent-ink);
  border-top: 0;
}
.inverted h2 { color: var(--accent-ink); }

.lotse__head {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 var(--s5);
  max-width: 20ch;
  text-wrap: balance;
}
.lotse__body {
  margin: 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  color: rgba(239, 237, 228, 0.86);
}
.lotse__body b { color: var(--accent-ink); font-weight: 600; }

.lotse__facts {
  list-style: none; margin: var(--s6) 0 0; padding: 0;
  display: grid; gap: var(--s3);
  font-family: var(--sans); font-size: 0.875rem;
  color: rgba(239, 237, 228, 0.86);
}
.lotse__facts li { padding-left: var(--s5); position: relative; }
.lotse__facts li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 0.75rem; height: 1px;
  background: rgba(239, 237, 228, 0.5);
}

.lotse__open {
  display: none;
  margin-top: var(--s6);
  min-height: 2.75rem;
  padding: var(--s3) var(--s5);
  background: var(--accent-ink); color: var(--accent);
  border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.01em;
}
.lotse__open[data-ready] { display: inline-block; }
.lotse__open:hover { background: #FFFFFF; }

.lotse__legal {
  margin: var(--s6) 0 0;
  font-family: var(--sans); font-size: 0.8125rem;
  line-height: 1.6;
  /* Siehe .inverted .mark: Reserve für das Licht am Zeiger. */
  color: rgba(239, 237, 228, 0.74);
  max-width: 52ch;
}

/* ── Fließtextbänder ─────────────────────────────────────────────── */

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.625rem, 3.4vw, 2.125rem);
  line-height: 1.12; letter-spacing: -0.02em;
  margin: 0 0 var(--s5);
  max-width: 22ch;
  text-wrap: balance;
}

.prose { max-width: 56ch; }
.prose p { margin: 0 0 var(--s4); }
.prose p:last-child { margin-bottom: 0; }
.prose b, .prose strong { font-weight: 600; }

.meta {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--sans); font-size: 0.8125rem;
  color: var(--ink-muted);
  max-width: 52ch;
}

/* ── Kontakt ─────────────────────────────────────────────────────── */

.contact {
  display: grid; gap: var(--s6);
}
@media (min-width: 48rem) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); }
}

.ledger { margin: 0; }
.ledger div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s4);
  padding-block: var(--s2);
  border-top: 1px solid var(--rule-soft);
  align-items: center;
}
.ledger div:first-child { border-top: 0; padding-top: 0; }
.ledger dt {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted);
}
.ledger dd {
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
  display: flex; align-items: center; min-height: 2.75rem;
}
/* Telefon, Mobil und E-Mail sind auf dem Telefon die eigentlichen
   Aktionen der Seite. Volle 44px Höhe als Tap-Ziel. */
.ledger a {
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
}
.ledger a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ── Bilder ──────────────────────────────────────────────────────
   Zwei Stück auf der ganzen Seite. Keine Rahmen, keine Ecken, keine
   Schatten: das Bild liegt einfach in der Spalte wie ein Absatz. */
.plate { margin: 0 0 var(--s6); }
.plate img { width: 100%; }
.plate figcaption {
  margin-top: var(--s3);
  font-family: var(--sans); font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  max-width: 46ch;
}

/* Im Band "Zur Person" steht das Bild in der Marginalspalte und
   trägt dort die stille Seite des Textes. */
.plate--aside { margin: 0; }
@media (min-width: 56rem) {
  .person__grid { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--s8); align-items: start; }
}
@media (max-width: 55.999rem) {
  .plate--aside { margin-top: var(--s6); max-width: 22rem; }
}

.where h3 {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s3);
}
.where address {
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1.5;
  margin: 0 0 var(--s4);
}
.where p {
  margin: 0 0 var(--s4);
  font-family: var(--sans); font-size: 0.875rem;
  color: var(--ink-muted);
  max-width: 40ch;
}
.where a.maplink {
  font-family: var(--sans); font-size: 0.875rem;
  color: var(--ink);
  text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 2.75rem;
}
.where a.maplink:hover { color: var(--accent); }

/* ── Fußzeile ────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--rule);
  /* Unten großzügig, damit der schwebende Knopf des Bußgeldlotsen
     den Impressumslink auf keinem Gerät verdecken kann. */
  padding-block: var(--s6) var(--s10);
  font-family: var(--sans); font-size: 0.8125rem;
  color: var(--ink-muted);
}
.foot__inner {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  justify-content: space-between; align-items: baseline;
}
.foot a {
  color: var(--ink);
  text-underline-offset: 3px;
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
}
.foot a:hover { color: var(--accent); }
.foot p { margin: 0; }

/* ── Bewegung ────────────────────────────────────────────────────
   Alles hier ist Zugabe. Ohne JavaScript und bei reduzierter
   Bewegung ist die Seite vollständig sichtbar und vollständig
   bedienbar, nur eben still. */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease),
              transform var(--t-slow) var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Gestaffelt, damit ein Abschnitt sich setzt statt aufzuploppen. */
.js .reveal[data-delay="1"] { transition-delay: 0.07s; }
.js .reveal[data-delay="2"] { transition-delay: 0.14s; }
.js .reveal[data-delay="3"] { transition-delay: 0.21s; }
.js .reveal[data-delay="4"] { transition-delay: 0.28s; }
.js .reveal[data-delay="5"] { transition-delay: 0.35s; }

/* Rechtsgebiete: die Zeile unter dem Zeiger tritt hervor, die
   Haarlinie färbt sich. Kein Kasten, kein Schatten, kein Sprung. */
.field {
  transition: border-color var(--t-fast) var(--ease);
}
.field__name, .field__law {
  transition: transform var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .field:hover { border-top-color: var(--accent); }
  .field:hover + .field { border-top-color: var(--accent); }
  .field:hover .field__name { transform: translateX(4px); }
  .field:hover .field__law  { transform: translateX(4px); color: var(--accent); }
}

/* Kontaktzeilen sind echte Links, also bekommen sie auch einen
   echten Zustand, mit Tastatur wie mit Maus. */
.ledger div { transition: background-color var(--t-fast) var(--ease); }
@media (hover: hover) {
  .ledger div:hover { background: var(--paper-sunk); }
}
.ledger div:focus-within { background: var(--paper-sunk); }

/* Kopfzeile: die Trennlinie tritt erst hervor, wenn tatsächlich
   etwas darunter weggescrollt ist. */
.top { transition: border-color var(--t-fast) var(--ease); }
.top { border-bottom-color: transparent; }
body.scrolled .top { border-bottom-color: var(--rule); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mark::before { transform: scaleX(1) !important; transition: none !important; }
  .field, .field__name, .field__law, .ledger div, .top {
    transition: none !important;
  }
}

/* ── Bußgeldlotse: eingebetteter Knopf des Werkzeugs ──────────────
   Die Akzentfarbe gehört eigentlich in die Kanzlei-Konfiguration
   des Werkzeugs (kanzleien/SLUG.json), nicht hierher. Hier
   wird sie an die Seite angeglichen.
   Der papierfarbene Ring ist Absicht: auf hellem Grund unsichtbar,
   auf dem dunklen Lotsen-Band trennt er den Knopf vom Hintergrund. */
.bgl-fab {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: 0 0 0 2px var(--paper),
              0 4px 14px -4px rgba(26, 25, 23, 0.28) !important;
}
/* Frühere Überbrückungsregel body:has(.bgl-overlay) .bgl-fab {display:none}
   entfernt (01.09.2026): embed.js erzeugt das .bgl-overlay inzwischen schon
   beim Laden statt erst beim Klick, wodurch die Regel den echten Fab
   dauerhaft unsichtbar machte, nicht nur beim geöffneten Widget. Fund
   unabhängig bestätigt bei Kamerafahrt/Standbilder, siehe FINGERPRINTS.md. */

/* ── Druck ───────────────────────────────────────────────────────── */
@media print {
  .top, .bgl-fab, .lotse__open, .skip { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .inverted { background: #fff; color: #000; border-top: 1px solid #000; }
  .inverted .lotse__body, .inverted .lotse__facts, .inverted .lotse__legal,
  .inverted .mark { color: #000; }
}

/* ── Ergänzungen Frings-Neß ─────────────────────────────────────── */

.top__nav {
  display: flex; align-items: center; gap: var(--s4);
  font-family: var(--sans); font-size: 0.875rem;
}
.top__nav a.top__link {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--ink-muted); text-underline-offset: 3px; text-decoration: none;
}
.top__nav a.top__link:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 40rem) { .top__link { display: none !important; } }

/* Brotkrumen auf den Unterseiten */
.crumbs {
  font-family: var(--sans); font-size: 0.8125rem;
  color: var(--ink-muted);
  margin: 0 0 var(--s5);
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--rule); }
.crumbs a { color: var(--ink-muted); text-underline-offset: 3px; display: inline-flex; min-height: 2.75rem; align-items: center; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { display: inline-flex; min-height: 2.75rem; align-items: center; }

/* Unterseiten: die Überschriften des Kunden sind lang, die H1 wird kleiner gesetzt. */
.hero--sub h1 {
  font-size: clamp(2rem, 5.2vw, 3.25rem);
  line-height: 1.08;
  hyphens: manual;
}
.hero--sub .hero__lead { max-width: 40ch; }
@media (max-width: 30rem) {
  h1 { hyphens: auto; -webkit-hyphens: auto; }
}

.intro p { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.6; }

/* Listen aus dem Kundentext: Haarlinien wie im Kontakt-Ledger, kein Aufzählungspunkt. */
.liste {
  list-style: none; margin: 0 0 var(--s5); padding: 0;
  max-width: 56ch;
  border-top: 1px solid var(--rule-soft);
}
.liste li {
  position: relative;
  padding: var(--s3) 0 var(--s3) var(--s5);
  border-bottom: 1px solid var(--rule-soft);
}
.liste li::before {
  content: ""; position: absolute; left: 0; top: 1.45em;
  width: 0.75rem; height: 1px; background: var(--accent);
}
@media (min-width: 60rem) {
  .liste--zwei { columns: 2; column-gap: var(--s7); max-width: none; border-top: 0; }
  .liste--zwei li { break-inside: avoid; }
  .liste--zwei li:first-child, .liste--zwei li { border-top: 0; }
}

.eintraege { margin: 0 0 var(--s5); max-width: 60ch; }
.eintraege div {
  border-top: 1px solid var(--rule-soft);
  padding-block: var(--s4);
}
.eintraege div:last-child { border-bottom: 1px solid var(--rule-soft); }
.eintraege dt { font-weight: 600; margin: 0 0 var(--s1); }
.eintraege dd { margin: 0; color: var(--ink); }
@media (min-width: 44rem) {
  .eintraege div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--s5); align-items: baseline; }
}

.prose .betont, .betont {
  border-left: 2px solid var(--accent);
  padding-left: var(--s5);
  font-weight: 600;
}

/* Schwerpunkte auf der Startseite: Zeile ist ein Verweis auf die Unterseite. */
.field__name a { text-decoration: none; }
.field__name a:hover { color: var(--accent); }
.field__more {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 2.75rem; margin-top: var(--s2);
  font-family: var(--sans); font-size: 0.875rem; font-weight: 500;
  color: var(--accent); text-underline-offset: 3px;
}
.field__more:hover { color: #1B2A22; }
.field__more svg { flex: none; transition: transform var(--t-fast) var(--ease); }
.field__more:hover svg { transform: translateX(3px); }

/* Weitere Schwerpunkte am Ende einer Unterseite */
.weitere { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.weitere li { border-top: 1px solid var(--rule-soft); }
.weitere li:last-child { border-bottom: 1px solid var(--rule-soft); }
.weitere a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  min-height: 3.25rem; padding-block: var(--s2);
  text-decoration: none; font-size: 1.125rem;
}
.weitere a:hover { color: var(--accent); }
.weitere small {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
}
@media (min-width: 48rem) { .weitere { grid-template-columns: 1fr 1fr; column-gap: var(--s7); } .weitere li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--rule-soft); } }

.where .buero { font-family: var(--sans); font-size: 0.875rem; color: var(--ink-muted); margin-top: calc(-1 * var(--s2)); }

/* Kontaktformular, in der Vorschau ohne Versand */
.formular { max-width: 40rem; }
.formular__hinweis {
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--paper-sunk);
  border-left: 2px solid var(--accent);
  font-family: var(--sans); font-size: 0.875rem; line-height: 1.55;
  color: var(--ink);
}
.kf { display: grid; gap: var(--s4); }
.kf__paar { display: grid; gap: var(--s4); }
@media (min-width: 40rem) { .kf__paar { grid-template-columns: 1fr 1fr; } }
.kf label, .kf legend {
  display: block; margin-bottom: var(--s1);
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; color: var(--ink);
}
.kf label small { font-weight: 400; color: var(--ink-muted); }
.kf input[type="text"], .kf input[type="email"], .kf input[type="tel"], .kf select, .kf textarea {
  width: 100%; min-height: 2.75rem;
  padding: var(--s2) var(--s3);
  font: inherit; font-size: 1rem; color: var(--ink);
  background: #FFFFFF;
  border: 1px solid #A9A396; border-radius: 0;
}
.kf textarea { min-height: 8rem; resize: vertical; }
.kf input:focus-visible, .kf select:focus-visible, .kf textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kf__haken { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s2); align-items: start; }
.kf__haken input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--accent); }
.kf__haken label { font-weight: 400; color: var(--ink-muted); line-height: 1.5; }
.kf__senden {
  justify-self: start;
  min-height: 3rem; padding: var(--s3) var(--s6);
  background: var(--accent); color: var(--accent-ink);
  border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 600;
}
.kf__senden:hover { background: #1B2A22; }
.kf__meldung { margin: 0; font-family: var(--sans); font-size: 0.875rem; color: var(--ink); }
.kf__meldung:empty { display: none; }
.kf__meldung { padding: var(--s3) var(--s4); background: var(--paper-sunk); border-left: 2px solid var(--accent); }

/* Fußzeile mit Schwerpunkt-Verweisen */
.foot__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.foot__nav a { color: var(--ink-muted); }
.foot__vorschau { width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.field__body p { margin: 0; }
/* Eigenname mit ß: keine Versalien, sonst wird „Frings-Neß“ zu „FRINGS-NESS“. */
.hero__eyebrow { text-transform: none; letter-spacing: 0.04em; font-size: 0.8125rem; }
@media (max-width: 30rem) {
  .top__inner { flex-wrap: nowrap; gap: var(--s2); }
  .wordmark { font-size: 0.875rem; white-space: normal; line-height: 1.25; }
  .top__nav { gap: 0; }
  .top__tel { padding: var(--s2) var(--s3); font-size: 0.875rem; }
}

/* Gebietsbilder neben den Schwerpunkten (Tim, 16.10.2026: Fotos der Vorlage rechtsweg) */
.field__bild { margin: 0 0 var(--s3); }
.field__bild img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(0.92); }
.field__bild figcaption { margin-top: var(--s1); font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--ink-muted); }
@media (min-width: 44rem) {
  .field.field--bild { grid-template-columns: 12rem minmax(0, 13rem) minmax(0, 1fr); align-items: start; }
  .field__bild { margin: 0; }
}
@media (max-width: 43.999rem) {
  .field__bild { max-width: 22rem; }
}
/* Porträt von Herrn Frings-Neß: Quelle nur 130 px breit, deshalb klein gezeigt */
.plate--portrait { max-width: 13rem; }
.plate--portrait img { width: 100%; height: auto; aspect-ratio: 1; }

/* Bewertungen (anwalt.de, wörtlich) */
.stimmen__schnitt { font-family: var(--sans); font-size: 0.9375rem; color: var(--ink); margin: var(--s2) 0 var(--s5); }
.stimmen__schnitt a { color: inherit; }
.stimmen__stand { color: var(--ink-muted); }
.stimmen { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.stimme { margin: 0; padding: var(--s4); background: var(--paper-sunk); border-top: 2px solid var(--accent); display: flex; flex-direction: column; }
.stimme__sterne { margin: 0 0 var(--s2); color: var(--accent); letter-spacing: 0.12em; font-size: 0.9375rem; }
.stimme__titel { margin: 0 0 var(--s2); font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; }
.stimme__text { margin: 0; flex: 1; }
.stimme__text p { margin: 0; }
.stimme__quelle { margin-top: var(--s3); font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-muted); }

/* KI-Hinweis so unauffällig wie möglich, aber sichtbar (Tim, 16.10.2026; Art. 50 KI-VO) */
figure:not(.plate--portrait) > figcaption { font-size: 0.625rem !important; letter-spacing: 0.04em; opacity: 0.6; margin-top: 0.25rem !important; }

/* Rechtstipps: Mandanteninformation Online (Deubner) im iFrame. Die Gestaltung im Inneren
   steht in deubner-mio.css, die Deubner per @import lädt. */
.mio-frame { display: block; width: 100%; min-height: 37.5rem; border: 0; background: transparent; }
.mio-quelle { margin: var(--s6) 0 0; font-family: var(--sans); font-size: 0.8125rem; line-height: 1.55; color: var(--ink-muted); max-width: 60ch; }
.mio-quelle a { color: inherit; text-underline-offset: 3px; }
.mio-intro { margin: 0 0 var(--s5); max-width: 52ch; color: var(--ink-muted); }
.mio-frame--teaser { min-height: 26rem; }
.mio-alle { margin: var(--s5) 0 0; }

/* Siegel der Arbeitsgemeinschaft Verkehrsrecht im DAV (Abschnitt „Die Kanzlei“) */
.siegel { display: inline-block; margin-top: var(--s5); border-radius: 50%; line-height: 0; }
.siegel img { width: 7.5rem; height: 7.5rem; transition: transform var(--t-fast) var(--ease); }
.siegel:hover img { transform: scale(1.03); }