/* Ribas Brutschy Abogados — Designwelt „Señalización bilingüe"
   Gestaltung und Code: PixelUno · https://pixelUno.es
   Unverbindliche Vorschau. Struktur, Gestaltung und Code © PixelUno. */

/* ── Schrift ───────────────────────────────────────────────────────────
   Overpass stammt aus der FHWA-Highway-Gothic, dem Alphabet amerikanischer
   Verkehrsschilder. Overpass Mono trägt jede Zahl, die auf dieser Seite
   eine Referenz ist: Colegiado-Nummern, Aktenzeichen, Paragrafen, Uhrzeiten.
   Keine Kursive — Wegweiser haben keine.                                   */
@font-face {
  font-family: "Overpass"; font-style: normal; font-weight: 200 900;
  font-display: swap; src: url("assets/fonts/overpass-var.woff2") format("woff2");
}
@font-face {
  font-family: "Overpass Mono"; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url("assets/fonts/overpassmono-var.woff2") format("woff2");
}

:root {
  /* Tafel — Navy aus der Bestandsmarke. Besetzt ganze Seitenfelder. */
  --tafel:      #000443;
  --tafel-deep: #00021c;
  --tafel-hoch: rgba(255,255,255,.035);  /* erhöhte Fläche in einer Tafel */

  /* Signal — Limette aus der Bestandsmarke. Richtung, aktiver Zustand,
     die eine Handlung. Nie Fläche, nie Dekoration. */
  --senal:      #d0eb29;
  --senal-hi:   #e2f95a;
  --senal-ink:  #55650a;   /* Limette als Text auf hellem Grund, AA-fest */

  /* Papier — das Dokumentenregister. */
  --papel:      #f4f4f1;
  --papel-2:    #e7e7e1;
  --tinta:      #11131a;
  --tinta-2:    #494d5b;

  /* Konturlinie — der eingerückte weiße Rand jedes Wegweiserschilds. */
  --linie:      rgba(255,255,255,.46);
  --linie-hi:   rgba(255,255,255,.72);
  --linie-d:    rgba(17,19,26,.20);
  --linie-d-hi: rgba(17,19,26,.42);

  /* PixelUno-Vorschaustreifen. Nicht Teil der Kanzleipalette - er soll
     sich absetzen und verschwindet mit dem Vorschaustatus. */
  --strip:     #6d28d9;
  --strip-ink: #f3ecff;
  --strip-dot: #d6c2ff;

  /* Fehlerzustand im Formular. Die einzige weitere Farbe der Seite -
     ein Fehler muss sich von der Limette unterscheiden, die Zustimmung
     bedeutet. Beide gegen Papier und Weiss auf AA geprueft. */
  --fehler:     #a3231f;
  --fehler-ink: #8f1f1b;

  --wrap: 1260px;
  --gut: clamp(1.15rem, 4vw, 3.4rem);
  --strip-h: 32px;
  --head-h: 66px;
  --inset: 10px;           /* Einzug der Konturlinie */
  --platte: clamp(1.3rem, 2.2vw, 1.9rem);  /* Polster einer Platte */
  --ease: cubic-bezier(.2,.75,.25,1);

  color-scheme: light;
}

/* ── Grundlagen ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--strip-h) + var(--head-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: "Overpass", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  font-size: 1.0625rem; line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--senal); color: var(--tafel); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--senal);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 50%; translate: -50% -140%; z-index: 90;
  background: var(--senal); color: var(--tafel); padding: .7rem 1.3rem;
  font-weight: 700; letter-spacing: .04em; text-decoration: none;
  transition: translate .2s var(--ease);
}
.skip:focus { translate: -50% 0; }

.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gut), 1540px); margin-inline: auto; }

/* ── Die Tafel ──────────────────────────────────────────────────────
   Jede Navy-Fläche trägt die eingerückte weiße Konturlinie. Das ist
   die eine Signatur, die die ganze Seite als Beschilderung lesbar macht. */
.tafel { position: relative; background: var(--tafel); color: #fff; }
.tafel::before {
  content: ""; position: absolute; inset: var(--inset);
  border: 1px solid var(--linie); pointer-events: none; z-index: 1;
}
.tafel--deep { background: var(--tafel-deep); }
.tafel--flat::before { display: none; }
.tafel > * { position: relative; z-index: 2; }

.hell { background: var(--papel); color: var(--tinta); position: relative; }
.hell--2 { background: var(--papel-2); }

.lage { padding-block: clamp(3.6rem, 7.5vw, 7rem); }
.lage--eng { padding-block: clamp(2.6rem, 5vw, 4.4rem); }

/* ── Typografie ────────────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.028em; line-height: 1.05; text-wrap: balance; }
p { margin: 0 0 1.05em; max-width: 56ch; }
p:last-child { margin-bottom: 0; }

.ziel {                                  /* die Zielzeile eines Wegweisers */
  font-size: clamp(2.3rem, 5.7vw, 4.5rem);
  font-weight: 700; letter-spacing: -.036em; line-height: 1.0;
}
.h2 { font-size: clamp(1.78rem, 3.4vw, 2.85rem); letter-spacing: -.032em; }
.h3 { font-size: clamp(1.16rem, 1.55vw, 1.4rem); letter-spacing: -.02em; line-height: 1.2; }

.legende {                               /* Schildlegende: Versalien, gesperrt */
  font-size: .705rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .17em; line-height: 1.3; margin: 0;
}
.tafel .legende { color: var(--senal); }
.hell .legende, .legende--dunkel { color: var(--senal-ink); }

.num {                                   /* Nummernregister */
  font-family: "Overpass Mono", ui-monospace, "Cascadia Mono", monospace;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.klein { font-size: .875rem; line-height: 1.56; }
.mp { font-style: normal; margin-inline: .3em .46em; }   /* Trennpunkt, siehe shell.typo */
.blass { color: var(--tinta-2); }
.tafel .blass { color: rgba(255,255,255,.68); }
.lead { font-size: clamp(1.06rem, 1.35vw, 1.22rem); line-height: 1.6; max-width: 48ch; }

/* ── Das zweisprachige Zeilenpaar ──────────────────────────────────
   Auf den Balearen steht jedes Amtsschild zweisprachig: Zeile über
   Zeile, gleiche Größe, keine Klammer, keine Fußnote. */
.paar > .paar-a { display: block; font-weight: 700; }
.paar > .paar-b { display: block; font-weight: 300; }
.tafel .paar > .paar-b { color: rgba(255,255,255,.6); }
.hell .paar > .paar-b { color: var(--tinta-2); }

/* ── Handlung ──────────────────────────────────────────────────────── */
.tat, .tat-2 {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .92rem 1.5rem; text-decoration: none;
  font-weight: 700; font-size: .95rem; letter-spacing: .005em;
  border: 1px solid transparent; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), translate .18s var(--ease);
}
.tat { background: var(--senal); color: var(--tafel); }
.tat:hover { background: var(--senal-hi); translate: 0 -1px; }
.tat-2 { background: transparent; border-color: var(--linie-hi); color: #fff; }
.tat-2:hover { border-color: var(--senal); color: var(--senal); }
.hell .tat-2 { border-color: var(--linie-d-hi); color: var(--tinta); }
.hell .tat-2:hover { border-color: var(--tafel); background: var(--tafel); color: #fff; }
/* Die primaere Handlung ist eine Wegweiserplatte: rechte Kante zugespitzt.
   Das ist die Richtungsangabe der Welt selbst - kein Pfeil-Icon noetig. */
.tat {
  padding-right: 2.5rem;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}
.taten { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ── Vorschaustreifen und Kopf ─────────────────────────────────────── */
.oben { position: sticky; top: 0; z-index: 60; }
.streifen {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-block-size: var(--strip-h); padding: .28rem var(--gut);
  background: var(--strip); color: var(--strip-ink);
  font-size: .745rem; font-weight: 500; letter-spacing: .035em;
  text-align: center; line-height: 1.32;
}
.streifen b { inline-size: 6px; block-size: 6px; background: var(--strip-dot); flex: none; }

/* Deckend, ohne backdrop-filter: ein Filter am Kopf wuerde zum Bezugsrahmen
   fuer position:fixed und damit das Klappmenue darunter einsperren. */
.kopf {
  background: var(--tafel); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.kopf-inner { display: flex; align-items: center; gap: 1.1rem; min-block-size: var(--head-h); }
.marke { display: inline-flex; align-items: center; gap: .68rem; text-decoration: none; color: #fff; margin-right: auto; }
.marke svg { width: 44px; height: 44px; color: var(--senal); flex: none; }
.marke-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.018em; line-height: 1.05; display: block; }
.marke-sub {
  display: block; font-size: .615rem; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: .2rem;
}

.haupt-nav { display: flex; align-items: center; gap: .1rem; }
.nav-fuss { display: none; }
.haupt-nav a {
  display: inline-block; padding: .55rem .74rem; text-decoration: none;
  font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.86); position: relative;
}
.haupt-nav a::after {
  content: ""; position: absolute; left: .74rem; right: .74rem; bottom: .28rem;
  height: 2px; background: var(--senal); scale: 0 1; transform-origin: left;
  transition: scale .22s var(--ease);
}
.haupt-nav a:hover, .haupt-nav a[aria-current] { color: #fff; }
.haupt-nav a:hover::after, .haupt-nav a[aria-current]::after { scale: 1 1; }

.kopf-tel {
  text-decoration: none; font-size: .84rem; font-weight: 600;
  color: rgba(255,255,255,.82); white-space: nowrap;
}
.kopf-tel:hover { color: var(--senal); }

.sprachen { display: flex; border: 1px solid rgba(255,255,255,.26); flex: none; }
.sprachen a {
  padding: .3rem .48rem; font-size: .685rem; font-weight: 700; letter-spacing: .1em;
  text-decoration: none; color: rgba(255,255,255,.68); text-transform: uppercase;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.sprachen a + a { border-left: 1px solid rgba(255,255,255,.26); }
.sprachen a:hover { color: #fff; }
.sprachen a[aria-current] { background: var(--senal); color: var(--tafel); }

.klappe-knopf {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; background: none; border: 1px solid rgba(255,255,255,.3);
  cursor: pointer; padding: 0; flex: none;
}
.klappe-knopf i, .klappe-knopf i::before, .klappe-knopf i::after {
  content: ""; display: block; width: 17px; height: 2px; background: #fff;
  transition: translate .2s var(--ease), rotate .2s var(--ease), background .12s;
}
.klappe-knopf i::before { translate: 0 -6px; }
.klappe-knopf i::after  { translate: 0 4px; }
.klappe-knopf[aria-expanded="true"] i { background: transparent; }
.klappe-knopf[aria-expanded="true"] i::before { translate: 0 0; rotate: 45deg; }
.klappe-knopf[aria-expanded="true"] i::after  { translate: 0 -2px; rotate: -45deg; }

/* ── Fuß ───────────────────────────────────────────────────────────── */
.fuss { background: var(--tafel-deep); color: rgba(255,255,255,.82); }
.fuss .blass { color: rgba(255,255,255,.62); }
.fuss .legende { color: var(--senal); }
.fuss a { color: rgba(255,255,255,.82); text-decoration: none; }
.fuss a:hover { color: var(--senal); }
.fuss-gitter {
  display: grid; gap: clamp(1.9rem, 4vw, 3.2rem);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  padding-block: clamp(3rem, 5.5vw, 4.6rem);
}
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li + li { margin-top: .42rem; }
.fuss-unten {
  display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; align-items: center;
  justify-content: space-between; padding-block: 1.35rem;
  border-top: 1px solid rgba(255,255,255,.13); font-size: .83rem;
}
.fuss-unten nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.signatur { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.signatur svg { width: 13px; height: 13px; color: var(--senal); }
.signatur a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Reveal ────────────────────────────────────────────────────────── */
/* Zwei gestaltete Momente, sonst nichts: der Sprachwechsel im Hero (klapp)
   und das Aufziehen der Plattenwand. Kein Fade auf jeder Sektion. */
.auf { opacity: 0; translate: 0 14px; }
.auf.da {
  opacity: 1; translate: 0 0;
  transition: opacity .5s var(--ease), translate .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
@media (prefers-reduced-motion: reduce) {
  .auf, .auf.da { opacity: 1; translate: 0 0; transition: none; }
}

/* ── Druck ─────────────────────────────────────────────────────────── */
@media print {
  .streifen, .klappe-knopf, .sprachen, .taten, .oben { display: none !important; }
  body::before {
    content: "Entwurf — erstellt von PixelUno, https://pixelUno.es — unverbindliche Vorschau";
    display: block; padding: 8pt 0; font-size: 8pt; letter-spacing: .08em;
  }
  * { background: #fff !important; color: #000 !important; }
  .tafel::before { display: none; }
}

/* ══ Startseite ═══════════════════════════════════════════════════════ */

/* ── Hero: die große Tafel ─────────────────────────────────────────── */
.hero { padding-block: clamp(3.2rem, 7vw, 6.2rem) 0; overflow: hidden; }
.hero-inner {
  display: grid; gap: clamp(2.4rem, 5vw, 4.6rem);
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  align-items: start;
  padding-bottom: clamp(3rem, 6vw, 5.4rem);
}
.hero-text .lead { margin: clamp(1.4rem, 2.4vw, 2rem) 0 clamp(1.7rem, 2.8vw, 2.3rem); }
.hero h1 > span { display: block; max-width: 14ch; text-wrap: balance; }
.hero h1 > span + span { margin-top: .58rem; padding-top: .78rem; position: relative; }
.hero h1 > span + span::before {
  content: ""; position: absolute; top: 0; left: 0; width: 3.6rem; height: 3px;
  background: var(--senal);
}

/* Das Wegweiserboard. Zielzeilen links, Zuordnung rechtsbündig — der
   Aufbau eines Vorwegweisers. */
.board {
  border: 1px solid var(--linie-hi);
  padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.1rem, 1.8vw, 1.6rem) 1.1rem;
  background: var(--tafel-hoch);
}
.board > .legende { margin-bottom: 1rem; }
.board-liste { list-style: none; margin: 0; padding: 0; }
.board-liste li + li { border-top: 1px solid rgba(255,255,255,.17); }
.board-liste a {
  display: flex; align-items: baseline; gap: 1rem; justify-content: space-between;
  padding: .72rem 0; text-decoration: none; position: relative;
}
.board-liste a::before {
  content: ""; position: absolute; left: -1.1rem; right: -1.1rem; top: 0; bottom: 0;
  background: var(--senal); opacity: 0; transition: opacity .18s var(--ease);
}
.board-liste a:hover::before { opacity: .1; }
.board-liste .paar-a { font-size: 1.02rem; letter-spacing: -.015em; }
.board-liste .paar-b { font-size: .875rem; }
.board-liste a:hover .paar-a { color: var(--senal); }
.board-mark {
  font-size: .705rem; letter-spacing: .08em; color: rgba(255,255,255,.62);
  white-space: nowrap; flex: none;
}
.board-mehr {
  display: inline-block; margin-top: 1.05rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--senal); text-decoration: none;
}
.board-mehr, .service-tat, .ort-route {
  position: relative; padding-bottom: .3rem;
}
.board-mehr::after, .service-tat::after, .ort-route::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor; scale: .34 1; transform-origin: left;
  transition: scale .26s var(--ease);
}
.board-mehr:hover::after, .service-tat:hover::after, .ort-route:hover::after { scale: 1 1; }

/* Der eine gestaltete Bewegungsmoment: die spanischen Zeilen klappen
   nacheinander um, wie ein Prismenschild, das auf die andere Seite dreht. */
@media (prefers-reduced-motion: no-preference) {
  .board-liste .paar-b {
    transform-origin: 50% 0;
    animation: klapp .52s var(--ease) backwards;
    animation-delay: calc(var(--i) * 78ms + 420ms);
  }
}
@keyframes klapp {
  from { rotate: x -92deg; opacity: 0; }
  to   { rotate: x 0deg;   opacity: 1; }
}

/* Bestätigungsleiste: das Schild nach der Abzweigung. */
.hero-fuss {
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: center;
  justify-content: space-between;
  width: min(100% - 2 * var(--gut), 1540px); margin-inline: auto;
  border-top: 1px solid var(--linie); padding-block: 1rem 1.15rem;
}
.orte { display: flex; flex-wrap: wrap; gap: .4rem 2.1rem; list-style: none; margin: 0; padding: 0; }
.orte li { display: flex; align-items: baseline; gap: .55rem; }
.ort-name { font-weight: 700; font-size: .93rem; letter-spacing: .01em; }
.ort-land { font-size: .72rem; color: rgba(255,255,255,.55); letter-spacing: .06em; }
.orte-tel { font-weight: 700; font-size: .93rem; text-decoration: none; color: var(--senal); }
.orte-tel:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Lagenkopf ─────────────────────────────────────────────────────── */
.lage-kopf { max-width: 50ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.lage-kopf .legende { margin-bottom: .95rem; }
.lage-kopf .lead { margin-top: 1.1rem; }

/* ── Gegenüberstellung: zwei Rechtsordnungen ───────────────────────── */
/* Zwei zugewandte Platten je Paar, im Feld statt in der Zeile: sonst laeuft
   diese Lage in dieselbe Zeilenliste wie der Ablauf darunter. */
.gegen-satz {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--linie-d);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--linie-d);
}
.gegen {
  background: var(--papel); padding: clamp(1.4rem, 2.6vw, 2.1rem);
  display: flex; flex-direction: column;
}
.hell--2 .gegen { background: var(--papel-2); }
.gegen-de, .gegen-es {
  display: block;
  font-size: clamp(1.08rem, 1.7vw, 1.38rem); font-weight: 700; letter-spacing: -.024em;
  line-height: 1.18;
}
.gegen-es { color: var(--senal-ink); }
.gegen-mitte {
  display: block; width: 2.2rem; height: 2px; background: var(--senal-ink);
  margin: .5rem 0;
}
.gegen p { margin-top: .9rem; }
.gegen p { max-width: 54ch; }

/* ── Wegweiserwand ─────────────────────────────────────────────────── */
.wand {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px;
  background: var(--linie); border: 1px solid var(--linie);
}
.wand-feld { grid-column: span var(--span); background: var(--tafel); }
.wand-feld a {
  display: block; height: 100%; padding: var(--platte);
  text-decoration: none; position: relative;
  transition: background .2s var(--ease);
}
.wand-feld a:hover { background: rgba(208,235,41,.08); }
.wand-feld a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--senal); scale: 0 1; transform-origin: left;
  transition: scale .26s var(--ease);
}
.wand-feld a:hover::after { scale: 1 1; }
.wand-mark {
  display: block; font-size: .68rem; letter-spacing: .13em;
  color: rgba(255,255,255,.48); margin-bottom: .75rem;
}
.wand-feld .h3 { display: block; margin-bottom: .55rem; }
.wand-feld .paar-b { font-size: .9rem; }
.wand-mehr { margin: clamp(1.8rem, 3vw, 2.6rem) 0 0; }

/* ── Strecke: Etappen des Immobilienkaufs ──────────────────────────── */
.strecke { list-style: none; margin: 0; padding: 0; }
.etappe {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.1rem, 2.6vw, 2.4rem);
  padding-block: clamp(1.5rem, 2.6vw, 2.1rem);
  border-top: 1px solid var(--linie-d);
}
.etappe:last-child { border-bottom: 1px solid var(--linie-d); }
.etappe-km {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 300; line-height: 1;
  color: var(--senal-ink); padding-top: .1rem; min-width: 2.2ch;
}
.etappe-text .h3 { margin-bottom: .5rem; }
.etappe-risiko {
  margin-top: .85rem; padding-left: clamp(.8rem, 1.4vw, 1.1rem);
  border-left: 1px solid var(--senal-ink);
}
.etappe-risiko .legende { display: block; margin-bottom: .3rem; }
.strecke-tat { margin-top: clamp(1.8rem, 3vw, 2.6rem); }

/* ── Kanzleilage: das Foto sitzt auf der Tafel, ungedehnt ──────────── */
.kanzlei-lage { padding-block: clamp(3.4rem, 6.5vw, 6rem); }
.kanzlei-inner {
  display: grid; gap: clamp(2rem, 4vw, 3.6rem);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
}
.kanzlei-bild { margin: 0; border: 1px solid var(--linie); padding: 9px; }
.kanzlei-bild img { width: 100%; height: auto; }
.kanzlei-bild figcaption {
  font-size: .705rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .17em; color: rgba(255,255,255,.55); padding: .8rem .1rem .15rem;
}
.kanzlei-text .legende { margin-bottom: .95rem; }
.kanzlei-text .h2 { margin-bottom: 1.15rem; }

/* Datenschild: Bezeichnung links, Wert rechts — die Plakette am Mast. */
.schild {
  margin: clamp(1.5rem, 2.6vw, 2.1rem) 0; padding: .25rem 0;
  border-block: 1px solid var(--linie);
}
.schild > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
  padding: .58rem 0;
}
.schild > div + div { border-top: 1px solid rgba(255,255,255,.14); }
.schild dt { font-size: .87rem; color: rgba(255,255,255,.74); }
.schild dd { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: .02em; }

/* ── Belege: der Massstabssprung der Seite ─────────────────────────── */
.faz-quelle { margin-bottom: 1.1rem; }
.faz-satz {
  font-size: clamp(1.6rem, 3.4vw, 2.9rem); font-weight: 400; letter-spacing: -.03em;
  line-height: 1.14; max-width: 20ch;
  margin-bottom: clamp(2.4rem, 4.5vw, 3.8rem);
}
.belege {
  display: grid; gap: 1px; background: var(--linie);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--linie);
}
@media (max-width: 820px) { .belege { grid-template-columns: 1fr; } }
.beleg { background: var(--tafel); padding: var(--platte); }
.beleg h3 { margin-bottom: .8rem; }
.liste-blank { list-style: none; margin: 0; padding: 0; }
.liste-blank li + li { margin-top: .5rem; }

/* ── Honorar ───────────────────────────────────────────────────────── */
.honorar {
  display: grid; gap: clamp(2rem, 4vw, 3.6rem);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
}
.honorar .legende { margin-bottom: .95rem; }
.honorar .h2 { margin-bottom: 1.15rem; }
.honorar-liste { margin-top: 1.3rem; }
.honorar-liste li { padding-left: 1rem; border-left: 1px solid var(--linie-d-hi); }
.honorar-schild { display: flex; align-items: center; justify-content: center; min-height: 300px; }
.honorar-inner { padding: clamp(1.8rem, 3vw, 2.6rem); text-align: center; }
.honorar-zahl {
  font-size: clamp(2.7rem, 5.4vw, 4.3rem); font-weight: 300; line-height: 1;
  margin: .85rem 0 .7rem; color: #fff; letter-spacing: -.035em;
}
.honorar-inner .legende::after {
  content: ""; display: block; width: 3rem; height: 3px;
  background: var(--senal); margin: .8rem auto 0;
}
.honorar-inner p { max-width: 24ch; margin-inline: auto; }

/* ── Handlungslage ─────────────────────────────────────────────────── */
.cta {
  display: grid; gap: clamp(1.8rem, 4vw, 3.4rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end;
}
.cta .legende { margin-bottom: .95rem; }
.cta .h2 { margin-bottom: 1.15rem; max-width: 20ch; }
.cta .taten { margin-top: 1.6rem; }
.cta-fussnote { color: rgba(255,255,255,.62); border-left: 1px solid var(--linie); padding-left: 1.1rem; }

/* ══ Anpassung ════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; }
  .board { max-width: 34rem; }
  .kanzlei-inner { grid-template-columns: 1fr; }
  .honorar, .cta { grid-template-columns: 1fr; }
  .honorar-schild { min-height: 0; }
  .cta-fussnote { border-left: 0; border-top: 1px solid var(--linie); padding: 1rem 0 0; }
}

@media (max-width: 900px) {
  :root { --head-h: 60px; --inset: 7px; }
  .haupt-nav {
    position: fixed; inset: calc(var(--strip-h) + var(--head-h)) 0 0; z-index: 55;
    display: block; background: var(--tafel); padding: 1.2rem var(--gut) 2.6rem;
    overflow-y: auto; translate: 0 -100%; visibility: hidden;
    transition: translate .34s var(--ease), visibility .34s;
  }
  .haupt-nav.offen { translate: 0 0; visibility: visible; }
  .haupt-nav a {
    display: block; padding: 1.05rem 0; font-size: 1.32rem; font-weight: 700;
    letter-spacing: -.02em; border-bottom: 1px solid rgba(255,255,255,.16);
  }
  .haupt-nav a::after { display: none; }
  .haupt-nav a[aria-current] { color: var(--senal); }
  .nav-fuss { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding-top: 1.9rem; }
  .nav-fuss .tat { align-self: stretch; justify-content: center; }
  .nav-fuss a:not(.tat) { padding: 0; font-size: 1rem; font-weight: 600; border: 0; color: rgba(255,255,255,.86); }
  .nav-fuss .nav-tel { color: var(--senal); }
  .klappe-knopf { display: flex; }
  .kopf-tel { display: none; }
  .marke-sub { display: none; }
  .wand-feld { grid-column: span 12; }
  .gegen-satz { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hero { padding-top: 2.4rem; }
  .hero-fuss { flex-direction: column; align-items: flex-start; }
  .orte { flex-direction: column; gap: .35rem; }
  .taten .tat, .taten .tat-2 { flex: 1 1 100%; justify-content: center; }
  .etappe { grid-template-columns: 1fr; gap: .5rem; }
  .etappe-km { font-size: 1.1rem; }
  .fuss-unten { flex-direction: column; align-items: flex-start; }
}

/* ══ Unterseiten ══════════════════════════════════════════════════════ */

/* ── Seitenkopf: die Ortstafel am Ortseingang ──────────────────────── */
.seitenkopf { padding-block: clamp(3rem, 6vw, 5.4rem) clamp(2.6rem, 5vw, 4.4rem); }
.seitenkopf-h {
  font-size: clamp(2.1rem, 4.6vw, 3.7rem); letter-spacing: -.035em; line-height: 1.02;
  max-width: 20ch;
}
.seitenkopf-h .paar-b { font-size: .44em; font-weight: 400; letter-spacing: .01em; margin-top: .5rem; }
.seitenkopf-h--artikel { max-width: 26ch; }
.seitenkopf .lead { margin-top: clamp(1.2rem, 2.2vw, 1.8rem); }
.seitenkopf .legende { margin-bottom: 1rem; }
.artikel-datum { margin-top: 1.4rem; letter-spacing: .06em; }

/* Vorwegweiser: Sprungliste zu den Rechtsgebieten */
.sprungliste { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.sprungliste ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1px;
}
.sprungliste a {
  display: block; padding: .58rem .9rem; text-decoration: none; background: var(--tafel);
  box-shadow: 0 0 0 1px var(--linie);
  font-size: .845rem; font-weight: 500; color: rgba(255,255,255,.88);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.sprungliste a:hover { background: var(--senal); color: var(--tafel); }

/* ── Rechtsgebiete ─────────────────────────────────────────────────── */
.gebiete { border-top: 1px solid var(--linie-d); }
.gebiet {
  display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr) auto;
  gap: clamp(1.2rem, 3vw, 3rem);
  padding-block: clamp(1.8rem, 3.4vw, 2.8rem);
  border-bottom: 1px solid var(--linie-d);
  scroll-margin-top: 7rem;
}
.gebiet-mark {
  font-size: .7rem; letter-spacing: .13em; color: var(--senal-ink);
  order: 3; padding-top: .42rem; white-space: nowrap;
}
.gebiet-text p + p { margin-top: 0; }

.weiter {
  list-style: none; margin: clamp(1.4rem, 2.4vw, 2rem) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--linie-d);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--linie-d);
}
.weiter-feld { background: var(--papel-2); padding: clamp(1.1rem, 1.8vw, 1.5rem); }

/* ── Prüfliste: Plattenwand, damit sie sich von der Kostenliste
      darunter unterscheidet ───────────────────────────────────────── */
.pruefungen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--linie);
  grid-template-columns: repeat(12, 1fr);
  border: 1px solid var(--linie);
}
.pruef { background: var(--tafel); padding: var(--platte); }
.pruef:nth-child(1) { grid-column: span 5; }
.pruef:nth-child(2) { grid-column: span 7; }
.pruef:nth-child(3) { grid-column: span 7; }
.pruef:nth-child(4) { grid-column: span 5; }
.pruef:nth-child(5) { grid-column: span 12; }
.pruef h3 { letter-spacing: -.018em; margin-bottom: .55rem; }

/* ── Kosten ────────────────────────────────────────────────────────── */
.kosten { border-top: 1px solid var(--linie-d); }
.kosten-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  gap: clamp(1rem, 2.4vw, 2.4rem);
  padding-block: clamp(1rem, 1.8vw, 1.5rem);
  border-bottom: 1px solid var(--linie-d);
  align-items: baseline;
}
.kosten-kuerzel { font-size: 1.02rem; font-weight: 700; letter-spacing: .02em; }
.kosten-hinweis { margin-top: 1.4rem; max-width: 62ch; }

/* ── Fragen ────────────────────────────────────────────────────────── */
.fragen { border-top: 1px solid var(--linie-d); }
.frage { border-bottom: 1px solid var(--linie-d); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  padding-block: clamp(1rem, 1.8vw, 1.35rem); cursor: pointer; list-style: none;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); font-weight: 700; letter-spacing: -.018em;
}
.frage summary::-webkit-details-marker { display: none; }
.frage-kreuz { width: 16px; height: 16px; flex: none; color: var(--senal-ink); transition: rotate .24s var(--ease); }
.frage[open] .frage-kreuz { rotate: 45deg; }
.frage-text { padding-bottom: clamp(1rem, 1.8vw, 1.35rem); max-width: 54ch; }
.frage summary:hover { color: var(--senal-ink); }

.lese-liste { list-style: none; margin: clamp(1.2rem, 2vw, 1.8rem) 0 0; padding: 0; border-top: 1px solid var(--linie-d); }
.lese-liste li { border-bottom: 1px solid var(--linie-d); }
.lese-liste a {
  display: block;
  padding-block: 1rem; text-decoration: none; font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.12rem); letter-spacing: -.018em;
}
.lese-liste a:hover { color: var(--senal-ink); }
.lese-liste .paar-b { display: none; }

/* ── Kanzlei ───────────────────────────────────────────────────────── */
.weg-satz {
  display: grid; gap: 1px; background: var(--linie-d);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--linie-d);
}
.weg-feld { background: var(--papel); padding: var(--platte); }
.weg-feld h3 { margin-bottom: .6rem; }

.philosophie { border-top: 1px solid var(--linie); }
.phil-zeile {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.2rem, 2.2vw, 1.9rem);
  border-bottom: 1px solid var(--linie);
}

.team {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.6rem, 2.8vw, 2.4rem) clamp(1.2rem, 2vw, 1.8rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.person-rang {
  display: block; font-size: .655rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .17em; color: var(--senal-ink);
  line-height: 1.3; min-height: 1.3em; margin-bottom: .4rem;  /* Platz auf jeder Karte */
}
.person h3 { min-height: 2.4em; }
@media (max-width: 1000px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.1rem; }
  /* Bezeichnung ueber Wert: in zwei schmalen Spalten hat die Legende
     sonst keinen Platz und laeuft in den Wert hinein. */
  .person-daten { grid-template-columns: 1fr; gap: 0; }
  .person-daten dt { margin-top: .55rem; }
  .person-daten dt:first-of-type { margin-top: 0; }
}
/* Die Portraits stammen aus zwei Terminen vor unterschiedlichen Waenden.
   Die eingerueckte Kontur der Tafeln fasst sie zu einem Satz zusammen -
   der Rahmen traegt mehr als der Hintergrund. */
.person figure { margin: 0; border: 1px solid var(--linie-d); padding: 7px; }
.person img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.person--partner figure { border-color: var(--senal-ink); }
.person-text { padding-top: .9rem; }
.person h3 { margin-bottom: .18rem; }
.person-rolle { color: var(--senal-ink); font-weight: 600; margin-bottom: .7rem; }
.person-daten { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .18rem .7rem; }
.person-daten dt {
  font-size: .655rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  color: var(--tinta-2); padding-top: .22rem;
}
.person-daten dd { margin: 0; color: var(--tinta-2); }
.person-daten .num { font-size: .82rem; }

.zwei-spalten {
  display: grid; gap: clamp(2rem, 4vw, 3.6rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.sprachliste {
  list-style: none; margin: 1.3rem 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.sprachliste li {
  border: 1px solid var(--linie-d-hi); padding: .42rem .85rem;
  font-weight: 700; font-size: .92rem;
}
.stellen li { border-top: 1px solid var(--linie-d); padding-block: 1rem; }
.stellen li:last-child { border-bottom: 1px solid var(--linie-d); }
.stellen li + li { margin-top: 0; }

/* ── Services ──────────────────────────────────────────────────────── */
.services {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--linie-d);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--linie-d);
}
.service {
  background: var(--papel); padding: var(--platte);
  display: flex; flex-direction: column; gap: .55rem;
}
.service-nr { font-size: .85rem; color: var(--senal-ink); letter-spacing: .1em; }
.service p { flex: 1; }
.service-tat {
  display: inline-block; margin-top: .7rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--senal-ink); text-decoration: none; align-self: flex-start;
}


/* ── Kontakt ───────────────────────────────────────────────────────── */
.kontakt {
  display: grid; gap: clamp(2rem, 4vw, 3.6rem);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start;
}
.kontakt .legende { margin-bottom: .95rem; }
.kontakt .h2 { margin-bottom: 1.15rem; }
.neben-feld { border: 1px solid var(--linie-d); padding: var(--platte); }
.neben-feld + .neben-feld { margin-top: 1.2rem; }
.neben-feld h2 { margin-bottom: 1rem; }
.zeiten { margin: 0 0 1rem; }
.zeiten > div { padding-block: .42rem; border-bottom: 1px solid var(--linie-d); }
.zeiten dt { font-size: .82rem; color: var(--tinta-2); }
.zeiten dd { margin: .1rem 0 0; font-weight: 700; font-size: .95rem; }

.ort-felder {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--linie);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--linie);
}
.ort-feld { background: var(--tafel); padding: var(--platte); }
.ort-feld h3 { margin-bottom: .8rem; }
.ort-feld address { font-style: normal; line-height: 1.55; margin-bottom: 1rem; }
.ort-daten { margin: 0 0 1.1rem; }
.ort-daten dt {
  font-size: .655rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  color: rgba(255,255,255,.62); margin-top: .5rem;
}
.ort-daten dd { margin: .1rem 0 0; }
.ort-daten a { text-decoration: none; }
.ort-daten a:hover { color: var(--senal); }
.ort-route {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--senal); text-decoration: none;
}


/* ── Formular ──────────────────────────────────────────────────────── */
.formular {
  display: grid; gap: 1.05rem 1.2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 1.4rem;
}
.feld { display: flex; flex-direction: column; gap: .38rem; margin: 0; max-width: none; }
.feld--breit { grid-column: 1 / -1; }
.feld--falle { position: absolute; left: -9999px; }
.feld label { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 1rem; color: var(--tinta);
  background: #fff; border: 1px solid var(--linie-d-hi); border-radius: 0;
  padding: .78rem .9rem; width: 100%;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.feld textarea { resize: vertical; min-height: 8.5rem; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--tinta-2); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--tafel); box-shadow: inset 0 0 0 1px var(--tafel);
}
.feld [aria-invalid="true"] { border-color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); }
.feld-fehler:not(:empty) { color: var(--fehler-ink); font-size: .8rem; font-weight: 600; }
.feld--haken { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .7rem; }
.feld--haken input { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .22rem; accent-color: var(--tafel); }
.feld--haken label {
  flex: 1; font-size: .875rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  line-height: 1.5; color: var(--tinta-2);
}
.feld--haken .feld-fehler { flex-basis: 100%; }
.formular-fuss { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem; }
.formular-hinweis { font-size: .875rem; font-weight: 600; max-width: 34ch; }
.formular-hinweis[data-art="fehler"] { color: var(--fehler-ink); }
.formular-hinweis[data-art="ok"] { color: var(--senal-ink); }

/* ── Rechtstexte und Fachbeitrag ───────────────────────────────────── */
.rechtstext { max-width: 60ch; }
.rechtsblock + .rechtsblock { margin-top: clamp(2rem, 3.4vw, 2.8rem); padding-top: clamp(2rem, 3.4vw, 2.8rem); border-top: 1px solid var(--linie-d); }
.rechtsblock h2 { margin-bottom: .9rem; }
.rechtsblock p { font-size: .95rem; line-height: 1.62; }
.liste-strich { list-style: none; margin: 0 0 1.05em; padding: 0; }
.liste-strich li { padding-left: 1.1rem; position: relative; font-size: .95rem; line-height: 1.62; }
.liste-strich li + li { margin-top: .3rem; }
.liste-strich li::before {
  content: ""; position: absolute; left: 0; top: .78em; width: .55rem; height: 1px;
  background: var(--senal-ink);
}

.artikel { max-width: 58ch; }
.artikel h2 { margin: clamp(2rem, 3.4vw, 2.8rem) 0 .85rem; }
.artikel h2:first-child { margin-top: 0; }
.artikel p { font-size: 1.06rem; line-height: 1.68; }
.artikel-hinweis {
  margin-top: clamp(2rem, 3.4vw, 2.8rem); padding-top: 1.2rem;
  border-top: 1px solid var(--linie-d);
}

@media (max-width: 1000px) {
  .weg-satz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .gebiet, .phil-zeile, .kosten-zeile, .pruef { grid-template-columns: 1fr; gap: .6rem; }
  .weiter, .services, .ort-felder, .weg-satz { grid-template-columns: 1fr; }
  .gebiet-mark { order: 0; padding-top: 0; }
  .kontakt { grid-template-columns: 1fr; }
  .formular { grid-template-columns: 1fr; }
  .seitenkopf-h .paar-b { font-size: .5em; }
}