/* =========================================================================
   BENTE — Rechtsanwälte
   Editorial legal identity: Siegessäule blue · warm ivory paper · brass
   ========================================================================= */

:root {
  /* palette
     Base = Siegessäule deep blue (lifted from the old near-black navy).
     Wine red is the brand accent: logo + primary CTAs ONLY.
     Gold/brass stays reserved for the Viktoria motif + fine metallic details. */
  --ink:        #143a67;   /* Siegessäule deep blue — base / dark sections (nudged lighter toward the Viktoria sky) */
  --ink-2:      #102d50;   /* deeper blue — trust strip, footer, protobar (lifted with --ink) */
  --navy:       #1c4a78;   /* mid blue — gradient highlights */
  --navy-soft:  #2a5c8c;   /* lighter blue */
  --paper:      #f5efe3;   /* warm ivory */
  --paper-2:    #fbf7ee;
  --bone:       #ece3d1;
  --brass:      #b3873f;   /* gold — Viktoria motif + fine metallic details */
  --brass-2:    #c8a463;
  --brass-soft: #e7d4a8;
  --wine:       #9a0000;   /* the firm's logo red (#9A0000) — logo + primary CTAs only */
  --wine-2:     #b51616;   /* red hover */
  --wine-ink:   #fbeeee;   /* text on red */
  --oxblood:    #6f2b2b;   /* muted warning red — legal notes / flags */

  --tx:         #1d2a33;   /* body text on paper */
  --tx-soft:    #5d5648;   /* muted on paper */
  --tx-light:   #efe7d6;   /* text on dark */
  --tx-light-2: #c1b9a6;   /* muted on dark (nudged lighter for contrast on blue) */
  --line:       rgba(23, 58, 94, .16);
  --line-light: rgba(231, 212, 168, .22);

  --serif: "Fraunces", "Hofler Text", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --shell: 1300px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Disable scroll anchoring. The sticky header shrinks on scroll (84->68px,
     animated), which changes document height; with anchoring ON the browser
     nudges scrollY to compensate, re-crossing the shrink threshold and making
     the header flicker (shrink<->grow) in a narrow band near the top. Cutting
     anchoring severs that feedback loop -- resizing the header no longer moves
     the scroll position. (No-op in Safari, which has no scroll anchoring.) */
  overflow-anchor: none;
}
/* Scale the base up on larger screens so the site reads generously on a PC
   (rem-based sizes/spacing follow; mobile keeps the 16px base). */
@media (min-width: 1100px) { html { font-size: 17px; } }
@media (min-width: 1500px) { html { font-size: 18px; } }
@media (min-width: 1800px) { html { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--sans);
  color: var(--tx);
  background: var(--paper);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* paper grain */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--tx-light); padding: 10px 16px; border-radius: 4px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* =========================================================================
   Typography primitives
   ========================================================================= */
.kicker {
  font-size: .74rem; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 600; color: var(--brass);
  display: inline-flex; align-items: center; gap: .8em; margin-bottom: 1.4rem;
}
.kicker::before { content: ""; width: 30px; height: 1px; background: var(--brass); opacity: .8; }
.kicker--light { color: var(--brass-2); }
.kicker--light::before { background: var(--brass-2); }

.h-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--ink);
  font-optical-sizing: auto;
}
.contact .h-display { color: var(--tx-light); }

.lead {
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  line-height: 1.6; color: var(--tx); max-width: 46ch; margin-top: 1.4rem;
  font-weight: 400;
}
.lead--light { color: var(--tx-light-2); }
.body { margin-top: 1.2rem; color: var(--tx-soft); max-width: 52ch; }

.section { padding: clamp(70px, 11vh, 140px) 0; position: relative; z-index: 2; }
main section[id] { scroll-margin-top: 92px; }
.section__head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 72px); }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .92em 1.7em; font-size: .9rem; font-weight: 600;
  letter-spacing: .02em; border-radius: 2px; position: relative;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}
.btn--wine {
  background: var(--wine); color: var(--wine-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 26px -14px rgba(138,35,51,.9);
}
.btn--wine:hover { background: var(--wine-2); transform: translateY(-2px); box-shadow: 0 16px 34px -16px rgba(138,35,51,.95); }
.btn--ghost {
  color: var(--tx-light); border: 1px solid var(--line-light);
}
.btn--ghost:hover { border-color: var(--brass-2); color: #fff; transform: translateY(-2px); }
/* Light-background outline CTA: wine hairline + wine text, fills wine on hover.
   Keeps the header CTA legible-but-quiet so the wordmark stays the only solid red. */
.btn--outline {
  background: transparent; color: var(--wine);
  border: 1.5px solid color-mix(in srgb, var(--wine) 55%, transparent);
  box-shadow: none;
}
.btn--outline:hover {
  background: var(--wine); color: var(--wine-ink); border-color: var(--wine);
  transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(138,35,51,.9);
}
.btn--full { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--brass-2); outline-offset: 3px; }

/* =========================================================================
   Prototype bar
   ========================================================================= */
.protobar {
  position: relative; z-index: 60;
  background: var(--ink-2); color: var(--tx-light-2);
  font-size: .76rem; letter-spacing: .04em;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 8px 44px 8px 16px; text-align: center;
  border-bottom: 1px solid var(--line-light);
}
.protobar__close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; line-height: 1; color: var(--tx-light-2); width: 28px; height: 28px;
  border-radius: 50%; transition: color .2s, background .2s;
}
.protobar__close:hover { color: #fff; background: rgba(255,255,255,.08); }
.protobar.is-hidden { display: none; }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 40px -28px rgba(13,26,38,.5);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 84px; transition: height .4s var(--ease); }
.site-header.is-scrolled .header__inner { height: 68px; }

.brand { display: inline-flex; align-items: center; gap: .8rem; }
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__type--logo { flex-direction: row; align-items: baseline; gap: .42em; }
/* Wordmark logo, matching the firm's Maurea-Light letterhead: ONE line, sans-serif,
   "BENTE & MEIER" bold uppercase + "Rechtsanwälte" in regular weight, all in the firm
   red (#9A0000). Live-text lockup; swap for the exact vector if ever supplied. */
.brand__name { font-family: var(--sans); font-size: 1.16rem; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: var(--wine); white-space: nowrap; }
.brand__sub { font-family: var(--sans); font-size: 1.16rem; font-weight: 400; letter-spacing: .01em; color: var(--wine); white-space: nowrap; }

.nav { display: flex; gap: clamp(1.1rem, 2.4vw, 2.4rem); }
.nav a {
  font-size: .94rem; font-weight: 500; color: var(--tx); position: relative; padding: .4em 0;
  letter-spacing: .01em; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px;
  background: var(--brass); transition: width .35s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }

.header__actions { display: flex; align-items: center; gap: 1.1rem; }
/* One compact language cluster: a globe glyph + three real <a> links (kept real
   for hreflang/SEO), current language inked, the others muted. No slash separators. */
.lang { display: inline-flex; align-items: center; gap: .1rem; font-size: .78rem; }
.lang__globe { width: 15px; height: 15px; margin-right: .4rem; color: var(--tx-soft); flex: none; }
.lang__globe circle, .lang__globe path { fill: none; stroke: currentColor; stroke-width: 1.5; }
.lang__btn { color: var(--tx-soft); font-weight: 600; letter-spacing: .05em; padding: .2em .32em; transition: color .2s; text-decoration: none; }
.lang__btn.is-active { color: var(--ink); }
.lang__btn:hover { color: var(--brass); }

.nav-cta { padding: .7em 1.25em; font-size: .82rem; }

.burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; align-items: center; }
.burger span { width: 22px; height: 1.6px; background: var(--ink); transition: transform .35s var(--ease), opacity .25s; }
.burger.is-open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative; z-index: 2;
  background:
    radial-gradient(120% 90% at 78% 8%, #245a87 0%, transparent 55%),
    radial-gradient(80% 70% at 12% 100%, #1a4368 0%, transparent 60%),
    var(--ink);
  color: var(--tx-light);
  padding: clamp(42px, 6vh, 72px) 0 clamp(14px, 2vh, 30px);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 70%, rgba(16,45,80,.6) 100%);
}
.hero__inner { position: relative; z-index: 3; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__text { align-self: center; max-width: 640px; }
/* Showpiece hero: the golden Viktoria of the Siegessäule. On desktop the photo
   rides the section background full-bleed (the figure markup is hidden) under a
   deep-blue scrim that keeps the headline legible; on mobile (see breakpoint) it
   falls back to a contained, floating figure so the landmark always stays visible. */
.hero--showpiece {
  min-height: min(78vh, 660px); display: flex; align-items: center;
  background:
    linear-gradient(98deg, var(--ink) 0%, rgba(16,46,77,.96) 30%, rgba(16,46,77,.52) 58%, rgba(16,46,77,.08) 100%),
    radial-gradient(46% 68% at 28% 46%, rgba(7,22,42,.46) 0%, rgba(7,22,42,.22) 54%, transparent 100%),
    radial-gradient(120% 90% at 78% 8%, rgba(36,90,135,.42) 0%, transparent 55%),
    url("/assets/img/viktoria/siegessaeule.jpg");
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, 9% 24%;
  background-repeat: no-repeat;
}
.hero--showpiece .hero__inner { grid-template-columns: 1fr; }
.hero--showpiece .hero__text { max-width: 640px; align-self: center; }
.hero__viktoria { display: none; margin: 0; }

.hero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.3rem, 4.7vw, 3.68rem);
  line-height: 1.025; letter-spacing: 0; margin: .22em 0 0;
  font-optical-sizing: auto;
  text-wrap: balance;
}
.hero__title span { display: block; }
.hero__em { color: #d1ad69; font-style: italic; font-weight: 400; }
.hero__lead {
  font-size: clamp(1.05rem, 1.42vw, 1.18rem); color: #efe4d0;
  max-width: 52ch; margin-top: 1.55rem; line-height: 1.52;
  font-weight: 430; text-shadow: 0 1px 2px rgba(0, 0, 0, .34);
}
.hero__sublead {
  max-width: 49ch; margin-top: .55rem; color: var(--tx-light-2);
  font-size: clamp(.98rem, 1.2vw, 1.04rem); line-height: 1.5;
  font-weight: 520; text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.05rem; margin-top: 1.55rem; }
.hero__cta .btn--wine { min-height: 50px; padding-inline: 1.9em; }
.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin-top: 1.6rem; font-size: .82rem; letter-spacing: .04em; color: var(--tx-light-2);
  text-transform: uppercase;
}
.hero__meta .dot { color: var(--brass); }
.hero__scroll {
  position: absolute; left: var(--pad); bottom: 14px; z-index: 3;
  display: flex; align-items: center; gap: .8rem; font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--tx-light-2);
}
.hero__scroll-line { width: 54px; height: 1px; background: var(--brass); position: relative; overflow: hidden; }
.hero__scroll-line::after { content:""; position:absolute; inset:0; background: var(--tx-light); animation: scrolldash 2.4s var(--ease) infinite; }
@keyframes scrolldash { 0%{ transform: translateX(-100%);} 60%,100%{ transform: translateX(100%);} }

@media (min-width: 861px) {
  .hero__scroll { left: auto; right: var(--pad); }
}

/* =========================================================================
   Trust strip
   ========================================================================= */
.trust { background: var(--ink-2); color: var(--tx-light); position: relative; z-index: 2; border-bottom: 1px solid var(--line-light); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item { padding: clamp(28px, 4vw, 46px) clamp(16px, 2vw, 30px); border-left: 1px solid var(--line-light); }
.trust__item:first-child { border-left: none; }
.trust__num { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 400; color: var(--brass-2); line-height: 1; }
.trust__plus { font-size: .6em; vertical-align: super; }
.trust__lab { display: block; margin-top: .9rem; font-size: .82rem; color: var(--tx-light-2); letter-spacing: .02em; }

/* =========================================================================
   About
   ========================================================================= */
.about {
  background:
    linear-gradient(180deg, rgba(251,247,238,.55), rgba(245,239,227,0) 34%),
    var(--paper);
}
.about__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.portrait {
  position: relative; aspect-ratio: 4/5; border-radius: 3px; margin: 0;
  background: linear-gradient(155deg, var(--navy), var(--ink));
  overflow: hidden; box-shadow: 0 30px 60px -30px rgba(13,26,38,.55);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; display: block; }
.portrait::after { content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px var(--line-light); border-radius: 3px; pointer-events: none; }
.portrait__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; z-index: 2;
  font-size: .76rem; letter-spacing: .03em; color: var(--tx-light);
  background: linear-gradient(0deg, rgba(16,45,80,.92), transparent);
}
.about__values { position: relative; }
.about__values::before {
  content: "";
  position: absolute;
  left: -1.45rem;
  top: 2.55rem;
  bottom: .15rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(179,135,63,.58), rgba(179,135,63,.06));
}
.values {
  list-style: none;
  margin-top: 2.4rem;
  display: grid;
  gap: 1.5rem;
}
.values li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  row-gap: .2rem;
  align-items: baseline;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.values li:last-child { border-bottom: none; padding-bottom: 0; }
.values li:hover { border-color: rgba(179,135,63,.38); transform: translateX(2px); }
.values__no { font-family: var(--serif); color: var(--brass); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.values__t { font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.values__d { grid-column: 2; color: var(--tx-soft); font-size: .92rem; }

/* Home → Über-uns teaser (the Viktoria / Siegessäule connection) */
.about__teaser {
  position: relative;
  margin-top: 1.9rem;
  padding-top: 1.55rem;
  border-top: 1px solid var(--line);
  color: var(--tx-soft);
  font-size: .95rem;
  max-width: 54ch;
}
.about__teaser::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 72px;
  height: 1px;
  background: var(--brass);
}
.about__teaser a {
  color: var(--wine);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid rgba(154,0,0,.22);
  transition: color .2s, border-color .2s;
}
.about__teaser a:hover { color: var(--wine-2); border-color: currentColor; }

/* =========================================================================
   Rechtsgebiete — editorial index
   ========================================================================= */
.areas { background: var(--paper-2); }
.areas__head {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(260px, 360px);
  gap: clamp(28px, 6vw, 86px);
  align-items: end;
}
.areas__assist {
  align-self: end;
  padding: clamp(18px, 2.4vw, 24px) 0 0 clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--line);
  border-left: 2px solid var(--brass);
  color: var(--tx-soft);
  font-size: .92rem;
}
.areas__assist-kicker {
  margin-bottom: .35rem;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.areas__assist a {
  display: inline-flex;
  margin-top: .85rem;
  color: var(--wine);
  font-weight: 700;
  font-size: .85rem;
}
.areas__assist a:hover { color: var(--wine-2); }
.index { list-style: none; border-top: 1px solid var(--line); }
.index__item { border-bottom: 1px solid var(--line); position: relative; }
.index__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brass);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s var(--ease);
}
.index__item.is-open::before { transform: scaleY(1); }
.index__row {
  width: 100%; display: grid; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, .32fr) auto;
  padding: clamp(20px, 2.7vw, 32px) 10px; text-align: left;
  transition: padding-left .4s var(--ease), background .35s var(--ease);
}
.index__row:hover, .index__row:focus-visible {
  padding-left: 20px;
  background: linear-gradient(90deg, rgba(179,135,63,.08), rgba(179,135,63,0) 62%);
}
.index__row:focus-visible { outline: 2px solid rgba(179,135,63,.34); outline-offset: -2px; }
.index__no { font-family: var(--serif); font-size: 1rem; color: var(--brass); width: 2ch; }
.index__body { min-width: 0; display: grid; gap: .55rem; }
.index__title { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 400; color: var(--ink); letter-spacing: -.01em; }
.index__mobile-sum { display: none; color: var(--tx-soft); font-size: .86rem; }
.index__preview {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
  max-width: 100%;
}
.index__preview span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 26px;
  padding: .24em .7em;
  border: 1px solid rgba(23,58,94,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.34);
  color: var(--tx-soft);
  font-size: .7rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.index__preview .index__owner-chip {
  display: none;
  color: var(--ink);
  border-color: rgba(179,135,63,.34);
  background: rgba(179,135,63,.08);
}
.index__side {
  display: grid;
  justify-items: end;
  gap: .28rem;
  min-width: 0;
}
.index__sum { font-size: .86rem; color: var(--tx-soft); justify-self: end; text-align: right; }
.index__owner {
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tx-soft);
  text-align: right;
  line-height: 1.35;
}
.index__owner span { color: var(--brass); font-weight: 700; }
.index__plus { width: 22px; height: 22px; position: relative; flex: none; }
.index__plus::before, .index__plus::after { content:""; position:absolute; background: var(--brass); transition: transform .35s var(--ease), opacity .35s; }
.index__plus::before { left: 0; top: 50%; width: 100%; height: 1.6px; transform: translateY(-50%); }
.index__plus::after  { top: 0; left: 50%; height: 100%; width: 1.6px; transform: translateX(-50%); }
.index__row[aria-expanded="true"] .index__plus::after { transform: translateX(-50%) scaleY(0); opacity: 0; }

.index__panel { overflow: hidden; max-height: 0; transition: max-height .5s var(--ease); }
.index__panel > * { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease) .05s, transform .4s var(--ease) .05s; }
.index__item.is-open .index__panel > * { opacity: 1; transform: none; }
.index__panel-inner { padding: 0 10px clamp(22px, 3vw, 36px) calc(2ch + clamp(1rem, 3vw, 2.5rem) + 10px); }
.index__panel p { max-width: 64ch; color: var(--tx-soft); padding: 0 0 clamp(6px, 1vw, 12px); }
.index__panel-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; }
.tags { display: flex; flex-wrap: wrap; gap: .55rem; padding: .4rem 4px clamp(24px, 3vw, 38px); }
.index__panel-bottom .tags { padding: .4rem 0 0; }
.tags span {
  font-size: .76rem; letter-spacing: .03em; color: var(--tx-soft);
  border: 1px solid var(--line); border-radius: 2px; padding: .42em .9em; background: var(--paper);
}
.tags .new { border-color: var(--brass); color: var(--brass); }
.areas__more { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: clamp(22px, 3vw, 36px); }
.areas__more .tags { padding: 0; }
.areas__more-label { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-soft); font-weight: 600; }

/* =========================================================================
   Team
   ========================================================================= */
.team { background: var(--paper); }
.team .section__head { max-width: 940px; margin-inline: auto; margin-bottom: clamp(32px, 4.6vw, 56px); }
.team .lead { max-width: 58ch; }
.team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 2.6vw, 38px); align-items: stretch; max-width: 940px; margin: 0 auto; }
.member {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #fffaf2 0%, var(--paper-2) 100%);
  border: 1px solid rgba(20,58,103,.18); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -46px rgba(13,26,38,.68);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.member::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 4;
  background: linear-gradient(90deg, var(--brass) 0%, var(--brass-soft) 34%, rgba(231,212,168,0) 82%);
}
.member:hover { transform: translateY(-3px); border-color: rgba(179,135,63,.42); box-shadow: 0 34px 70px -44px rgba(13,26,38,.72); }
/* Both partners stand as cut-outs on the same neutral slate stage, so the two
   portraits read as a matched set regardless of their source photos. The stage
   is slightly wider than tall and the figures are scaled down, so the section
   feels composed instead of dominated by the photos. */
.member__photo {
  --photo-scale: 1;
  --photo-y: 5%;
  position: relative; aspect-ratio: 1.14 / 1;
  background:
    radial-gradient(95% 82% at 50% 4%, rgba(101,122,137,.9) 0%, transparent 62%),
    radial-gradient(70% 55% at 50% 100%, rgba(200,164,99,.14) 0%, transparent 62%),
    linear-gradient(180deg, #405461 0%, #2a343d 100%);
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.member__photo::before {
  content: ""; position: absolute; inset: clamp(14px, 3vw, 24px) clamp(16px, 3vw, 28px) 0; z-index: 0;
  border: 1px solid rgba(231,212,168,.16); border-bottom: 0; border-radius: 4px 4px 0 0;
  pointer-events: none;
}
.member__photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 2;
  background:
    linear-gradient(0deg, #2a343d 0%, rgba(42,52,61,.86) 22%, rgba(42,52,61,.34) 62%, rgba(42,52,61,0) 100%);
  pointer-events: none;
}
.member__photo picture {
  width: calc(100% * var(--photo-scale));
  height: calc(100% * var(--photo-scale));
  display: block;
  position: relative;
  z-index: 1;
  transform: translateY(var(--photo-y));
}
.member__photo img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block; }
.member__photo--bente-cut { --photo-scale: 1.08; --photo-y: 5%; }
.member__photo--bente-cut-extended { --photo-scale: 1.21; --photo-y: 12%; }
.member__photo--meier-cut { --photo-scale: 1.08; --photo-y: 5%; }
.member__body { position: relative; flex: 1; padding: clamp(22px, 2.3vw, 30px); }
.member__body::before {
  content: ""; display: block; width: 44px; height: 2px; margin-bottom: 1rem;
  background: linear-gradient(90deg, var(--brass), rgba(179,135,63,.18));
}
.member__name { font-family: var(--serif); font-size: clamp(1.38rem, 2vw, 1.78rem); font-weight: 500; color: var(--ink); line-height: 1.12; }
.member__role { color: var(--brass); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .55rem; }
.member__bio { margin-top: 1.05rem; color: var(--tx-soft); font-size: .95rem; line-height: 1.68; }
.member__creds { list-style: none; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: grid; gap: .65rem; }
.member__creds li { position: relative; display: grid; grid-template-columns: 13px 1fr; gap: .72rem; align-items: start; font-size: .9rem; line-height: 1.45; color: var(--tx); }
.member__creds li::before { content: ""; width: 7px; height: 7px; border: 1.5px solid var(--brass); transform: rotate(45deg); margin-top: .48em; }
.member__langs { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .86rem; color: var(--tx-soft); }
.member__langs span { color: var(--ink); font-weight: 700; }
.member__flag { margin-top: 1rem; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--oxblood); }

/* =========================================================================
   Honorar
   ========================================================================= */
.fees {
  background:
    radial-gradient(90% 70% at 18% 8%, rgba(251,247,238,.52), rgba(251,247,238,0) 62%),
    linear-gradient(180deg, rgba(251,247,238,.26), rgba(236,227,209,0) 34%, rgba(20,58,103,.032) 100%),
    var(--bone);
  border-block: 1px solid rgba(20,58,103,.08);
  overflow: hidden;
}
.fees__shell { position: relative; z-index: 1; }
.fees .section__head { max-width: 760px; margin-bottom: clamp(34px, 5vw, 58px); }
.fees .h-display { max-width: 11em; }
.fees__body {
  display: grid;
  grid-template-columns: minmax(310px, .88fr) minmax(420px, 1.12fr);
  gap: clamp(18px, 3vw, 38px);
  align-items: stretch;
}
.fees__anchor {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(26px, 3.2vw, 42px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.66), rgba(251,247,238,.72)),
    var(--paper-2);
  border: 1px solid rgba(20,58,103,.18);
  border-left: 4px solid var(--brass);
  border-radius: 4px;
  box-shadow: 0 28px 62px -46px rgba(13,26,38,.55);
  overflow: hidden;
}
.fees__anchor::after {
  content: "§34";
  position: absolute;
  right: clamp(14px, 2vw, 24px);
  bottom: -0.28em;
  font-family: var(--serif);
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 1;
  color: rgba(20,58,103,.055);
  pointer-events: none;
}
.fees__anchor-kicker {
  position: relative;
  z-index: 1;
  color: var(--brass);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.fees__price {
  position: relative;
  z-index: 1;
  margin-top: clamp(18px, 3vw, 32px);
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: .9;
  font-weight: 500;
  color: var(--ink);
  max-width: 7ch;
}
.fees__price-note {
  position: relative;
  z-index: 1;
  margin-top: .75rem;
  color: var(--tx-soft);
  font-size: .92rem;
}
.fees__includes {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: clamp(24px, 3vw, 38px);
}
.fees__includes p {
  color: var(--ink);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fees__includes ul {
  list-style: none;
  display: grid;
  gap: .62rem;
  margin-top: .9rem;
}
.fees__includes li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--tx);
  font-size: .96rem;
}
.fees__includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .55rem;
  height: 1px;
  background: var(--brass);
}
.fees__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 1.4vw, 18px);
}
.fee {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(138px, .48fr) minmax(0, 1fr);
  gap: clamp(.8rem, 1.4vw, 1.4rem);
  align-items: start;
  min-height: 100%;
  padding: clamp(22px, 2.4vw, 32px);
  background: rgba(251,247,238,.72);
  border: 1px solid rgba(20,58,103,.15);
  border-radius: 4px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.fee::before {
  content: "";
  position: absolute;
  left: clamp(22px, 2.4vw, 32px);
  top: 0;
  width: 1.65rem;
  height: 2px;
  background: var(--brass);
}
.fee:hover {
  transform: translateY(-3px);
  border-color: rgba(179,135,63,.45);
  box-shadow: 0 22px 48px -36px rgba(13,26,38,.42);
}
.fee__no { font-family: var(--serif); font-size: 1rem; color: var(--brass); }
.fee__t { font-family: var(--serif); font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 500; color: var(--ink); }
.fee__d { color: var(--tx-soft); font-size: .94rem; }
.fees__note {
  max-width: 980px;
  margin-top: clamp(18px, 3vw, 32px);
  padding: 1rem 1.15rem;
  color: var(--tx-soft);
  font-size: .88rem;
  background: rgba(251,247,238,.48);
  border: 1px solid rgba(20,58,103,.1);
  border-radius: 4px;
}

/* =========================================================================
   Process
   ========================================================================= */
.process {
  overflow: hidden; isolation: isolate;
  background:
    linear-gradient(128deg, rgba(231,212,168,.08) 0 1px, transparent 1px 52%),
    linear-gradient(135deg, var(--ink-2) 0%, var(--ink) 58%, #1a4775 100%);
  color: var(--tx-light);
}
.process::before {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .105;
  background-image:
    linear-gradient(rgba(231,212,168,.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,212,168,.26) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.process::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: inset 0 1px rgba(231,212,168,.18), inset 0 -1px rgba(231,212,168,.16);
}
.process__texture {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background:
    linear-gradient(115deg, transparent 0 57%, rgba(231,212,168,.07) 57.1%, transparent 57.8%),
    linear-gradient(115deg, transparent 0 68%, rgba(251,247,238,.045) 68.1%, transparent 68.7%);
}
.process__grid { position: relative; z-index: 1; display: block; }
.process__head {
  max-width: none; margin-bottom: clamp(38px, 5.4vw, 72px);
  display: grid; grid-template-columns: minmax(0, 760px) minmax(280px, 430px);
  gap: clamp(26px, 6vw, 92px); align-items: end;
}
.process .h-display { color: var(--tx-light); max-width: 10em; }
.process .lead { color: var(--tx-light-2); }
.process__note {
  position: relative; align-self: end;
  border: 1px solid rgba(231,212,168,.24); border-left: 3px solid var(--brass-2);
  border-radius: 4px; padding: clamp(18px, 2.5vw, 26px);
  background: linear-gradient(180deg, rgba(251,247,238,.10), rgba(251,247,238,.045));
  box-shadow: 0 24px 58px -42px rgba(0,0,0,.85);
}
.process__urgent {
  color: #fff9ea; font-weight: 600; line-height: 1.45; font-size: clamp(.96rem, 1.25vw, 1.08rem);
}
.process__urgent::before {
  content: ""; display: inline-block; width: .62em; height: .62em; margin-right: .62em;
  border: 1.5px solid var(--brass-2); transform: rotate(45deg) translateY(-1px);
}
.process__assurance {
  margin-top: .75rem; color: var(--brass-soft); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; line-height: 1.45; text-transform: uppercase;
}
.process__steps {
  position: relative; list-style: none; counter-reset: process; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px);
  padding-top: 30px;
}
.process__steps::before {
  content: ""; position: absolute; left: 5%; right: 5%; top: 53px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,164,99,.35), var(--brass-2), rgba(200,164,99,.35), transparent);
}
.process-step {
  position: relative; min-width: 0; min-height: 318px; overflow: hidden;
  background: linear-gradient(180deg, rgba(251,247,238,.985), rgba(245,239,227,.955));
  border: 1px solid rgba(231,212,168,.34); border-radius: 4px;
  padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; gap: .72rem;
  box-shadow: 0 32px 82px -54px rgba(0,0,0,.92);
}
.process-step::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--brass), var(--brass-soft), transparent);
}
.process-step__ghost {
  position: absolute; right: clamp(12px, 1.8vw, 22px); top: clamp(10px, 1.5vw, 18px);
  font-family: var(--serif); font-size: clamp(5.2rem, 8vw, 7.6rem); line-height: .75;
  color: rgba(20,58,103,.07); pointer-events: none;
}
.process-step__top {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: .35rem;
}
.process-step__no {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border: 1px solid rgba(231,212,168,.5); border-radius: 50%;
  background: var(--ink); color: var(--brass-soft); box-shadow: 0 12px 24px -16px rgba(0,0,0,.85);
  font-family: var(--serif); font-size: 1rem; line-height: 1;
}
.process-step__icon {
  position: relative; z-index: 1; width: 44px; height: 44px; flex: none; color: var(--brass);
  filter: drop-shadow(0 8px 18px rgba(179,135,63,.16));
}
.process-step__meta {
  position: relative; z-index: 1; max-width: 100%; color: var(--oxblood);
  font-size: .72rem; font-weight: 800; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase;
}
.process-step__t {
  position: relative; z-index: 1; font-family: var(--serif); color: var(--ink);
  font-size: clamp(1.26rem, 1.7vw, 1.52rem); font-weight: 500; line-height: 1.12;
}
.process-step__d {
  position: relative; z-index: 1; color: var(--tx-soft); font-size: .92rem;
}
.process-step:hover {
  border-color: rgba(231,212,168,.65);
  box-shadow: 0 38px 92px -54px rgba(0,0,0,.98);
}

/* =========================================================================
   Location band (Berlin)
   ========================================================================= */
.location { position: relative; background: var(--ink); color: var(--tx-light); overflow: hidden; z-index: 2; }
.location__media {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(7,20,38,.98) 0%, rgba(7,20,38,.94) 36%, rgba(16,45,80,.78) 66%, rgba(16,45,80,.56) 100%),
    url("/assets/img/berlin/wilmersdorf.jpg");
  background-size: cover; background-position: 60% center;
  filter: saturate(.82) contrast(.96);
}
.location__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,20,36,.34) 0%, rgba(8,20,36,.16) 44%, transparent 72%);
  box-shadow: inset 0 0 180px rgba(0,0,0,.62);
}
.location__inner { position: relative; z-index: 2; padding: clamp(72px, 12vh, 150px) 0; }
.location__card { max-width: 540px; }
.location__card .h-display { color: var(--tx-light); margin-top: .2rem; }
.location__card .lead--light {
  max-width: 41ch;
  color: #fff7e8;
  font-size: clamp(1.28rem, 1.9vw, 1.48rem);
  line-height: 1.72;
  font-weight: 500;
  text-shadow: 0 2px 12px rgba(0,0,0,.58);
}
.location__addr {
  margin: 1.6rem 0 1.8rem; font-size: 1rem; letter-spacing: .035em; color: #f4dca9;
  padding-left: 1rem; border-left: 2px solid var(--brass);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.location__actions {
  display: flex; flex-wrap: wrap; gap: .8rem;
}

/* email links (assembled by JS) — the underline is for inline text links only,
   never for button CTAs (.btn). :where(.btn) keeps specificity at (0,1,0) so the
   callbar/contact overrides below still win. */
.obf-email:not(:where(.btn)) { color: inherit; border-bottom: 1px solid currentColor; transition: color .2s; }
.contact__details .obf-email { color: var(--tx-light); border-bottom-color: var(--brass-2); }
.contact__details .obf-email:hover { color: var(--brass-2); }

/* =========================================================================
   Contact
   ========================================================================= */
.contact { background: var(--ink); color: var(--tx-light); overflow: hidden; }
.contact__grid {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-areas: "intro form" "meta form";
  column-gap: clamp(40px, 6vw, 88px); row-gap: 0; align-items: start;
}
.contact__intro { grid-area: intro; }
.contact__meta { grid-area: meta; }
.contact .form { grid-area: form; }
.contact__details { margin-top: 2.6rem; display: grid; gap: 1.5rem; }
.contact__details dt { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-2); margin-bottom: .3rem; }
.contact__details dd { color: var(--tx-light); font-size: 1.02rem; }
.flag { color: var(--oxblood); font-size: .78rem; letter-spacing: .02em; }
.contact .flag { color: #c98b8b; }
.contact__routes { display: grid; gap: .85rem; margin-top: 2.4rem; }
.contact__routes .map { margin-top: 0; }

.map {
  display: flex; align-items: center; gap: 1rem; margin-top: 2.4rem;
  padding: 1.1rem 1.3rem; border: 1px solid var(--line-light); border-radius: 4px;
  background: rgba(231,212,168,.04); transition: border-color .3s, transform .3s var(--ease);
}
.map:hover { border-color: var(--brass-2); transform: translateY(-2px); }
.map__pin { color: var(--brass-2); font-size: 1.3rem; }
.map--transit .map__pin { font-size: 1rem; }
.map__txt { display: flex; flex-direction: column; line-height: 1.3; }
.map__txt strong { color: var(--tx-light); font-weight: 600; }
.map__txt span { font-size: .84rem; color: var(--tx-light-2); }
.map__arr { margin-left: auto; color: var(--brass-2); transition: transform .3s var(--ease); }
.map:hover .map__arr { transform: translateX(5px); }

/* form */
.form { background: var(--paper); border-radius: 6px; padding: clamp(26px, 3vw, 42px); box-shadow: 0 40px 80px -50px rgba(0,0,0,.8); }
.field { margin-bottom: 1.2rem; }
.field label, .check span { display: block; }
.field label { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-soft); margin-bottom: .5rem; font-weight: 600; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--tx); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 3px; padding: .82em 1em; resize: vertical;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder, .field textarea::placeholder { color: #a99f8c; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brass); background: #fff; box-shadow: 0 0 0 3px rgba(179,135,63,.14); }
.check { display: flex; align-items: flex-start; gap: .7rem; margin: .4rem 0 1.4rem; font-size: .86rem; color: var(--tx-soft); }
.check input { margin-top: .25em; accent-color: var(--brass); width: 16px; height: 16px; flex: none; }
.check a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.check a:hover { color: var(--oxblood); }
.form__ok { margin-top: 1.1rem; padding: .9rem 1rem; background: rgba(179,135,63,.12); border: 1px solid var(--brass); border-radius: 3px; color: var(--ink); font-size: .9rem; text-align: center; }
.form__err { margin-top: 1.1rem; padding: .9rem 1rem; background: rgba(138,35,51,.08); border: 1px solid var(--wine); border-radius: 3px; color: var(--wine); font-size: .9rem; text-align: center; }
.field__hint { margin-top: .45rem; font-size: .76rem; color: var(--tx-soft); }
.field input[type="file"] { width: 100%; font: inherit; font-size: .9rem; color: var(--tx-soft); background: var(--paper-2); border: 1px dashed var(--line); border-radius: 3px; padding: .7em .9em; cursor: pointer; }
.field input[type="file"]::file-selector-button { font: inherit; font-weight: 600; margin-right: .9em; padding: .5em .9em; border: 0; border-radius: 2px; background: var(--wine); color: var(--wine-ink); cursor: pointer; }
.field input[type="file"]:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(179,135,63,.14); }
/* honeypot: visually removed but reachable by bots */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   Brand banner — Viktoria motif + "Immer für Ihr Recht"
   ========================================================================= */
.brand-banner {
  position: relative; z-index: 2; overflow: hidden;
  background: radial-gradient(90% 130% at 50% -15%, #245a87 0%, transparent 60%), var(--ink);
  color: var(--tx-light);
  padding: clamp(70px, 12vh, 150px) 0;
}
/* The firm-supplied gold-Viktoria-on-blue-sky photo, layered behind the tagline
   under a deep-blue scrim so the light text stays legible. Scoped to #markenbild
   (the home banner) so the shared .brand-banner CTA bands on area pages keep their
   plain blue. background-color from .brand-banner shows through if the image fails. */
#markenbild {
  background-image:
    /* bottom fade: dissolve the photo into the contact section's --ink — kills the seam */
    linear-gradient(to bottom, rgba(20,58,103,0) 52%, rgba(20,58,103,.5) 80%, var(--ink) 99%),
    /* legibility scrim, toned to the new --ink so band + photo read as one blue */
    radial-gradient(135% 125% at 50% 0%, rgba(20,58,103,.40) 0%, rgba(20,58,103,.70) 52%, rgba(20,58,103,.86) 100%),
    url("/assets/img/viktoria/siegessaeule.jpg");
  background-size: cover;
  background-position: center 18%;
  background-repeat: no-repeat;
}
.brand-banner__inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.brand-banner__rule { width: 46px; height: 2px; background: var(--brass-2); margin-bottom: 1.8rem; }
.brand-banner__tagline { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.05; letter-spacing: -.01em; color: var(--tx-light); }
.brand-banner .btn { margin-top: 2.2rem; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--ink-2); color: var(--tx-light-2); padding: clamp(56px, 8vh, 90px) 0 28px; position: relative; z-index: 2; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); padding-bottom: 48px; border-bottom: 1px solid var(--line-light); }
.footer__name { font-size: 1.32rem; letter-spacing: .01em; color: var(--tx-light); }
.footer__name-strong { font-family: var(--sans); font-weight: 800; text-transform: uppercase; }
.footer__name-sub { font-family: var(--sans); font-weight: 400; }
.footer__tag { font-size: .82rem; margin-top: .4rem; }
.footer__h { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-2); margin-bottom: 1.1rem; }
.footer__col { display: flex; flex-direction: column; gap: .65rem; font-size: .9rem; min-width: 0; }
.footer__col a { color: var(--tx-light-2); transition: color .2s; max-width: 100%; overflow-wrap: anywhere; }
.footer__brand { min-width: 0; }
.footer__col a:hover { color: var(--brass-2); }
.footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; padding-top: 24px; font-size: .78rem; color: var(--tx-light-2); }
.footer__proto { color: #8d8270; }

/* =========================================================================
   Conversion elements: phone, hero photo, FAQ, sticky call bar
   ========================================================================= */
.ico { width: 18px; height: 18px; flex: none; }

.header-phone { display: inline-flex; align-items: center; gap: .5em; color: var(--ink); font-weight: 600; font-size: .9rem; white-space: nowrap; text-decoration: none; }
.header-phone .ico { width: 16px; height: 16px; color: var(--brass); }
.header-phone:hover { color: var(--brass); }

.hero__phone {
  display: inline-flex; align-items: center; gap: .55em; color: var(--tx-light);
  font-weight: 650; font-size: 1.02rem; padding: .74em .48em .68em;
  border-bottom: 1px solid rgba(231, 212, 168, .62);
  white-space: nowrap;
  transition: color .2s, border-color .2s, transform .25s var(--ease);
}
.hero__phone .ico { width: 20px; height: 20px; color: var(--brass-2); }
.hero__phone:hover { color: var(--brass-2); border-color: currentColor; transform: translateY(-1px); }

.contact__call { display: inline-flex; align-items: center; gap: .55em; margin-top: 1.8rem; font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--tx-light); transition: color .2s; }
.contact__call .ico { width: 24px; height: 24px; color: var(--brass-2); }
.contact__call:hover { color: var(--brass-2); }
.contact__response { margin-top: .7rem; color: var(--brass-soft); font-size: .92rem; }

.footer-phone { color: var(--tx-light-2); }
.footer-phone:hover { color: var(--brass-2); }

.faq { background: var(--paper); }
.faq__wrap { max-width: 880px; margin-inline: auto; }
.faq-index .index__row { grid-template-columns: 1fr auto; }
.index__q { font-family: var(--serif); font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 400; color: var(--ink); letter-spacing: -.005em; }
.faq-index .index__row { padding-inline: clamp(16px, 2vw, 24px) 14px; }
.faq-index .index__row:hover,
.faq-index .index__row:focus-visible { padding-left: clamp(18px, 2.4vw, 28px); }
.faq-index .index__panel p {
  max-width: 70ch;
  padding: 0 clamp(52px, 7vw, 86px) clamp(18px, 2.4vw, 28px) clamp(16px, 2vw, 24px);
}

.callbar { display: none; }

@media (max-width: 1100px) { .header-phone { display: none; } }
@media (max-width: 760px) {
  /* Single sticky CTA: routes to the contact form (the firm's preferred channel). */
  .callbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--ink); border-top: 1px solid var(--line-light); box-shadow: 0 -8px 24px -12px rgba(0,0,0,.55); }
  .callbar__btn { display: flex; align-items: center; justify-content: center; gap: .5em; padding: .95rem; font-weight: 600; font-size: .95rem; text-decoration: none; }
  .callbar__btn .ico { width: 18px; height: 18px; }
  .callbar__btn--cta { background: var(--wine); color: var(--wine-ink); }
  .callbar__btn--cta .ico { color: var(--wine-ink); }
  body { padding-bottom: 56px; }
  body.nav-locked .callbar { display: none; }
}

/* =========================================================================
   Reveal animation
   ========================================================================= */
/* Progressive enhancement: only hide for animation when JS is active,
   so content stays visible if scripts fail or are disabled. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* =========================================================================
   Mobile nav + responsive
   ========================================================================= */
@media (max-width: 1240px) {
  .burger { display: flex; }
  /* Drop backdrop-filter on mobile: it makes .site-header a containing block
     for the fixed nav drawer, trapping it inside the header box. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }

  /* Full-screen overlay: fade in (no off-screen translate -> no page overflow,
     so the sticky header keeps working without any html-level overflow rule). */
  .nav {
    position: fixed; inset: 0; width: 100%; height: 100%;
    flex-direction: column; justify-content: center; align-items: center; gap: 1.7rem;
    background: radial-gradient(120% 80% at 80% 8%, #245a87 0%, transparent 55%), var(--ink);
    padding: 2rem var(--pad);
    opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s var(--ease);
    z-index: 45;
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav a { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .nav.is-open a { opacity: 1; transform: none; }
  .nav a { color: var(--tx-light); font-size: 1.7rem; font-family: var(--serif); letter-spacing: .01em; }
  .nav a::after { background: var(--brass-2); left: 50%; transform: translateX(-50%); }
  .nav-cta { display: none; }
  /* roomier language-switcher tap targets on touch (was ~20x24) */
  .lang { gap: .1rem; }
  .lang__btn { padding: .6rem .4rem; }
  /* keep brand + close button above the drawer (both are siblings of .nav) */
  .brand, .burger { position: relative; z-index: 50; }

  body.nav-locked { overflow: hidden; }
  body.nav-locked .site-header { background: transparent; }
  body.nav-locked .brand__name { color: var(--tx-light); }
  body.nav-locked .brand__sub { color: var(--brass-soft); }
  body.nav-locked .burger span { background: var(--tx-light); }
  body.nav-locked .lang__btn { color: var(--brass-soft); }
  body.nav-locked .lang__btn.is-active { color: #fff; }
  body.nav-locked .lang__globe { color: var(--brass-soft); }
}

@media (max-width: 860px) {
  .about__grid, .contact__grid, .team__grid { grid-template-columns: 1fr; }
  .contact__grid {
    grid-template-areas: "intro" "form" "meta";
    row-gap: clamp(26px, 7vw, 38px);
  }
  .contact__call { margin-top: 0; }
  /* portrait is order:-1 on mobile, so the large desktop top padding stranded
     it mid-screen; pull the hero up so Uli sits near the top */
  .hero { padding-top: clamp(16px, 3vh, 32px); }
  .hero__inner { grid-template-columns: 1fr; align-items: start; gap: 1.4rem; }
  .hero__text { max-width: none; }
  .hero--showpiece { min-height: 0; display: block; background:
    radial-gradient(120% 90% at 78% 8%, #245a87 0%, transparent 55%),
    radial-gradient(80% 70% at 12% 100%, #1a4368 0%, transparent 60%),
    var(--ink); }
  .hero--showpiece .hero__viktoria { display: block; order: -1; justify-self: center; max-width: 230px; width: 100%; }
  .hero--showpiece .hero__viktoria picture { display: block; aspect-ratio: 4 / 5; }
  .hero--showpiece .hero__viktoria img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)) saturate(1.04); -webkit-mask-image: radial-gradient(80% 88% at 50% 44%, #000 62%, transparent 100%); mask-image: radial-gradient(80% 88% at 50% 44%, #000 62%, transparent 100%); }
  .hero__lead { max-width: 44ch; margin-top: 1.7rem; }
  .hero__sublead { max-width: 42ch; }
  .hero__cta { margin-top: 1.65rem; gap: .55rem .9rem; }
  .hero__scroll { display: none; }
  /* the middot separator dangles once the meta wraps; the flex gap spaces it instead */
  .hero__meta .dot { display: none; }
  .about__values { margin-top: 1rem; }
  .about__values::before { left: 0; }
  .values { padding-left: 18px; }
  .trust__grid { grid-template-columns: 1fr 1fr; }
  .trust__item:nth-child(-n+2) { border-top: none; }
  .trust__item:nth-child(odd) { border-left: none; }
  .trust__item { border-top: 1px solid var(--line-light); }
  .fees__body { grid-template-columns: 1fr; }
  .fees__anchor { min-height: auto; }
  .fees__grid { grid-template-columns: 1fr; }
  .fee { display: block; }
  .fee__t { margin-top: .7rem; }
  .fee__d { margin-top: .85rem; }
  .process { padding-block: clamp(74px, 11vh, 104px); }
  .process::before { background-size: 38px 38px; mask-image: none; }
  .process__head { grid-template-columns: 1fr; gap: 1.3rem; margin-bottom: clamp(28px, 7vw, 42px); }
  .process .h-display { max-width: 9.8em; }
  .process__note { align-self: stretch; padding: 18px; }
  .process__assurance { letter-spacing: .1em; }
  .process__steps { grid-template-columns: 1fr; gap: 1rem; padding-top: 0; }
  .process__steps::before {
    left: 24px; right: auto; top: 14px; bottom: 14px; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, rgba(200,164,99,.42), var(--brass-2), rgba(200,164,99,.42), transparent);
  }
  .process-step {
    min-height: 0; padding: 22px 20px 22px clamp(76px, 19vw, 92px);
    gap: .55rem;
  }
  .process-step__top {
    position: absolute; left: 17px; top: 22px; display: block; margin: 0;
  }
  .process-step__no { width: 38px; height: 38px; font-size: .9rem; }
  .process-step__icon { width: 34px; height: 34px; margin-top: .8rem; }
  .process-step__ghost { right: 10px; top: 12px; font-size: 4.4rem; }
  .process-step__meta { font-size: .68rem; letter-spacing: .095em; }
  .process-step__t { font-size: clamp(1.18rem, 6vw, 1.42rem); }
  .areas__head { grid-template-columns: 1fr; gap: clamp(22px, 6vw, 34px); }
  .areas__assist { max-width: 42rem; padding-left: 18px; }
  .location__inner { padding-inline: clamp(28px, 7vw, 44px); }
  .index__row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; }
  .index__row:hover, .index__row:focus-visible { padding-left: 10px; }
  .index__side { display: none; }
  .index__mobile-sum { display: block; }
  .index__preview .index__owner-chip { display: inline-flex; }
  .index__panel-inner { padding-left: calc(2ch + 1rem + 10px); }
  .index__panel-bottom { align-items: flex-start; flex-direction: column; gap: .7rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.6rem; }
  .footer__brand { grid-column: 1 / -1; }
  /* team cards stack to one column; the square blue stage handles all widths */
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .brand__sub { display: none; }
  .brand__name { font-size: 1.05rem; letter-spacing: .02em; }
  .hero__cta { align-items: flex-start; flex-direction: column; }
  .hero__cta .btn--wine { width: auto; min-width: min(100%, 190px); }
  .hero__phone { padding-left: 0; padding-right: 0; }
  .hero__meta { font-size: .72rem; }
  .trust__grid { grid-template-columns: 1fr 1fr; }
  .fees__anchor { padding: 24px; }
  .fees__price { font-size: 2.5rem; max-width: none; }
  .fees__note { font-size: .84rem; }
  .process__note { padding: 16px; }
  .process__urgent { font-size: .94rem; }
  .process__steps::before { left: 20px; }
  .process-step { padding-left: 64px; padding-right: 18px; }
  .process-step__top { left: 13px; }
  .process-step__no { width: 34px; height: 34px; }
  .process-step__icon { width: 30px; height: 30px; }
  .areas__assist { font-size: .88rem; }
  .index__row { padding: 20px 6px; }
  .index__title { font-size: clamp(1.22rem, 8vw, 1.62rem); line-height: 1.12; }
  .index__preview { gap: .35rem; }
  .index__preview span { min-height: 24px; padding-inline: .58em; font-size: .67rem; }
  .index__panel-inner { padding-left: 6px; padding-right: 6px; }
  .header__actions { gap: .7rem; }
  .lang { font-size: .74rem; }
}
@media (max-width: 380px) {
  /* keep the language switcher reachable on small phones (don't hide it) */
  .lang { font-size: .7rem; }
  .lang__btn { padding: .55rem .3rem; }
  .brand__name { font-size: .94rem; }
}

/* =========================================================================
   Legal pages (Impressum / Datenschutz)
   ========================================================================= */
.legal-hero { background: var(--ink); color: var(--tx-light); padding: clamp(54px, 9vh, 110px) 0 clamp(40px, 6vh, 64px); position: relative; overflow: hidden; z-index: 2; }
.legal-hero .h-display { color: var(--tx-light); }
.legal-back { display: inline-flex; align-items: center; gap: .5em; font-size: .82rem; letter-spacing: .04em; color: var(--brass-2); margin-bottom: 1.6rem; transition: gap .25s var(--ease); }
.legal-back:hover { gap: .9em; }

.legal { background: var(--paper); padding: clamp(50px, 8vh, 90px) 0 clamp(60px, 9vh, 110px); position: relative; z-index: 2; }
.legal__wrap { max-width: 760px; }
.legal h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--ink); margin: 2.6rem 0 .9rem; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 1.6rem 0 .4rem; }
.legal p, .legal li { color: var(--tx-soft); margin-bottom: .7rem; font-size: .96rem; }
.legal ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.legal strong { color: var(--tx); }
.legal a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal a:hover { color: var(--oxblood); }
.legal__note {
  margin: 0 0 2.4rem; padding: 1.1rem 1.3rem; border-left: 2px solid var(--brass);
  background: rgba(179,135,63,.08); color: var(--tx); font-size: .9rem; border-radius: 0 3px 3px 0;
}
.legal__note strong { letter-spacing: .02em; }
.legal__note--warn { border-color: var(--oxblood); background: rgba(111,43,43,.06); }
.flag-inline { color: var(--oxblood); font-style: italic; }
.legal__updated { margin-top: 2.4rem; font-size: .86rem; color: var(--tx-soft); }
.footer__proto a { color: inherit; }

/* =========================================================================
   Über-uns page
   ========================================================================= */
.ueber-hero {
  position: relative;
  z-index: 2;
  overflow: hidden;
  color: var(--tx-light);
  background:
    linear-gradient(135deg, var(--ink-2) 0%, var(--ink) 46%, #1d5f9e 100%);
}
.ueber-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16,45,80,.98) 0%, rgba(20,58,103,.92) 45%, rgba(20,58,103,.42) 76%, rgba(20,58,103,.18) 100%);
}
.ueber-hero__grid {
  position: relative;
  z-index: 1;
  min-height: clamp(560px, calc(100vh - 132px), 760px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .78fr);
  gap: clamp(2.2rem, 5vw, 5rem);
  align-items: end;
  padding-top: clamp(62px, 9vh, 112px);
  padding-bottom: clamp(34px, 6vw, 74px);
}
.ueber-hero__text {
  align-self: center;
  max-width: 760px;
  padding-bottom: clamp(18px, 4vh, 56px);
}
.ueber-hero .h-display {
  color: var(--tx-light);
  max-width: 12.8em;
}
.ueber-hero__lead {
  margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
  max-width: 42ch;
  color: var(--tx-light-2);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.7;
}
.ueber-hero__figure {
  margin: 0;
  justify-self: end;
  align-self: end;
  width: min(100%, 560px);
  line-height: 0;
  filter: drop-shadow(0 30px 52px rgba(0,0,0,.34));
}
.ueber-hero__figure picture { display: block; aspect-ratio: 4 / 5; }
.ueber-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 27%;
  -webkit-mask-image: radial-gradient(86% 96% at 50% 44%, #000 68%, transparent 100%);
  mask-image: radial-gradient(86% 96% at 50% 44%, #000 68%, transparent 100%);
}
.ueber { background: var(--paper); }
.ueber-story { padding-top: clamp(54px, 8vh, 92px); }
.ueber__wrap { max-width: 720px; }
.ueber__wrap::before {
  content: "";
  display: block;
  width: 78px;
  height: 1px;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--brass);
}
.ueber__p { margin-top: 1.2rem; color: var(--tx-soft); font-size: 1.02rem; max-width: 64ch; }
.ueber__p:first-child {
  margin-top: 0;
  color: var(--tx);
  font-size: clamp(1.08rem, 1.65vw, 1.3rem);
  line-height: 1.62;
}
.ueber__note { margin: 2.2rem 0 0; padding: 1rem 1.2rem; border-left: 2px solid var(--oxblood); background: rgba(111,43,43,.06); color: var(--tx); font-size: .9rem; border-radius: 0 3px 3px 0; font-style: italic; }
.ueber .btn { margin-top: 2.4rem; }

@media (min-width: 961px) {
  .ueber-hero__grid {
    display: block;
  }
  .ueber-hero__text {
    position: relative;
    z-index: 2;
    max-width: 740px;
  }
  .ueber-hero__figure {
    position: absolute;
    z-index: 1;
    inset: 0 calc(-1 * var(--pad)) 0 auto;
    right: calc(-1 * max(var(--pad), calc((100vw - var(--shell)) / 2)));
    width: min(56vw, 840px);
    height: 100%;
    filter: none;
  }
  .ueber-hero__figure::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(90deg, var(--ink) 0%, rgba(20,58,103,.82) 18%, rgba(20,58,103,.22) 48%, rgba(20,58,103,0) 72%),
      linear-gradient(0deg, rgba(20,58,103,.48) 0%, rgba(20,58,103,0) 24%);
  }
  .ueber-hero__figure picture {
    height: 100%;
    aspect-ratio: auto;
  }
  .ueber-hero__figure img {
    object-position: 50% 26%;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 960px) {
  .ueber-hero__grid {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: clamp(1.8rem, 6vw, 3rem);
    padding-top: clamp(48px, 7vh, 82px);
    padding-bottom: 0;
  }
  .ueber-hero__text {
    align-self: start;
    max-width: 720px;
    padding-bottom: 0;
  }
  .ueber-hero .h-display { max-width: 10.5em; }
  .ueber-hero__figure {
    justify-self: center;
    width: min(100%, 520px);
  }
  .ueber-hero__figure picture { aspect-ratio: 1 / 1.06; }
}

@media (max-width: 560px) {
  .ueber-hero__grid {
    gap: 1.7rem;
    padding-top: 46px;
  }
  .ueber-hero .legal-back { margin-bottom: 1.15rem; }
  .ueber-hero__lead {
    font-size: 1rem;
    line-height: 1.62;
  }
  .ueber-hero__figure {
    width: calc(100% + var(--pad) + var(--pad));
    max-width: none;
    margin-inline: calc(-1 * var(--pad));
  }
  .ueber-hero__figure picture { aspect-ratio: 1 / .96; }
  .ueber-story { padding-top: 52px; }
}

/* =========================================================================
   Practice-area pages (Rechtsgebiete detail)
   ========================================================================= */
/* hero (extends .legal-hero) */
.area-hero .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; font-size: .8rem; letter-spacing: .02em; color: var(--tx-light-2); margin-bottom: 1.4rem; }
.area-hero .crumbs a { color: var(--brass-2); transition: color .2s; }
.area-hero .crumbs a:hover { color: var(--tx-light); }
.area-hero .crumbs__sep { color: var(--tx-light-2); opacity: .55; }
.area-hero .crumbs [aria-current="page"] { color: var(--tx-light-2); }
.area-hero__lead { margin-top: 1.2rem; max-width: 60ch; }
.area-hero__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.2rem; margin-top: 2.4rem; }
.area-hero__partner { display: inline-flex; align-items: center; gap: .85rem; }
.area-hero__photo { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; flex: none; border: 1px solid var(--line-light); }
.area-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.area-hero__who { display: flex; flex-direction: column; line-height: 1.3; }
.area-hero__who strong { font-family: var(--serif); font-weight: 500; color: var(--tx-light); font-size: 1rem; }
.area-hero__who span { font-size: .78rem; color: var(--tx-light-2); }

/* two-column body */
.area-grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(40px, 6vw, 88px); align-items: start; }
.area-h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--ink); letter-spacing: -.01em; line-height: 1.12; }
.area-block { margin-top: clamp(40px, 6vw, 70px); }
.area-main > .area-block:first-of-type, .area-main > .area-glance:first-child { margin-top: 0; }

/* at-a-glance box */
.area-glance { background: var(--paper-2); border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: 4px; padding: clamp(22px, 3vw, 32px); }
.area-glance__list { list-style: none; margin-top: 1.1rem; display: grid; gap: .85rem; }
.area-glance__list li { position: relative; padding-left: 1.7rem; color: var(--tx); font-size: .98rem; }
.area-glance__list li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 9px; height: 9px; border: 1.5px solid var(--brass); border-radius: 50%; }

/* services tiles */
.area-services { margin-top: 1.6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.area-svc { background: var(--paper); padding: clamp(18px, 2.4vw, 26px); }
.area-svc__t { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; color: var(--ink); margin-bottom: .4rem; }
.area-svc__t::before { content: "§"; color: var(--brass); font-size: .92em; margin-right: .5em; }
.area-svc__d { font-size: .92rem; color: var(--tx-soft); }

/* approach prose */
.area-prose .area-h2 { margin-bottom: .2rem; }
.area-prose__p { margin-top: 1.1rem; max-width: 64ch; color: var(--tx-soft); }

/* the area FAQ reuses the .index accordion; just give the block air */
.area-body .faq-index { margin-top: 1.6rem; }

/* sidebar */
.area-aside { position: sticky; top: 104px; display: grid; gap: 1.4rem; }
.area-card { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: clamp(20px, 2.5vw, 28px); }
.area-partner__photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin: 1rem 0 .9rem; border: 1px solid var(--line); }
.area-partner__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.area-partner__name { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--ink); }
.area-partner__role { font-size: .85rem; color: var(--tx-soft); margin-bottom: .8rem; }
.area-partner__langs { font-size: .82rem; color: var(--tx-soft); margin-bottom: .8rem; }
.area-partner__langs span { color: var(--ink); font-weight: 600; }
.area-partner__creds { list-style: none; display: grid; gap: .4rem; margin-bottom: 1rem; }
.area-partner__creds li { position: relative; padding-left: 1.1rem; font-size: .85rem; color: var(--tx-soft); }
.area-partner__creds li::before { content: "—"; position: absolute; left: 0; color: var(--brass); }
.area-card__link { font-size: .85rem; color: var(--wine); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color .2s; }
.area-card__link:hover { border-color: var(--wine); }

.area-related__list { list-style: none; margin-top: 1rem; display: grid; }
.area-related__list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 1.02rem; color: var(--ink); transition: color .2s, padding-left .25s var(--ease); }
.area-related__list li:last-child a { border-bottom: 1px solid var(--line); }
.area-related__list a:hover { color: var(--wine); padding-left: 6px; }
.area-related__arr { color: var(--brass); }

.area-note { font-size: .8rem; font-style: italic; color: var(--tx-soft); padding: .9rem 1rem; border-left: 2px solid var(--oxblood); background: rgba(111,43,43,.06); border-radius: 0 3px 3px 0; }

/* CTA band (extends .brand-banner) */
.area-cta__text { max-width: 52ch; margin: 1rem auto 0; color: var(--tx-light-2); }
.area-cta__btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.8rem; }

/* home: link from each area accordion panel to its detail page + linked chips */
.index__more { display: inline-flex; align-items: center; justify-content: center; gap: .45em; flex: none; min-height: 38px; padding: .55em .9em; border: 1px solid rgba(154,0,0,.22); border-radius: 2px; color: var(--wine); background: rgba(154,0,0,.035); font-size: .82rem; font-weight: 700; letter-spacing: .02em; transition: gap .2s var(--ease), background .2s, border-color .2s; }
.index__more::after { content: "→"; color: var(--brass); }
.index__more:hover { gap: .75em; background: rgba(154,0,0,.07); border-color: rgba(154,0,0,.36); }
.areas__more .tags a.new { cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.areas__more .tags a.new:hover { background: var(--brass); border-color: var(--brass); color: #fff; }

@media (max-width: 860px) {
  .area-grid { grid-template-columns: 1fr; }
  .area-aside { position: static; margin-top: clamp(36px, 6vw, 56px); }
}
@media (max-width: 560px) {
  .area-services { grid-template-columns: 1fr; }
}

/* =========================================================================
   Reviews — compact auto-rotating carousel of genuine client voices.
   CSP-safe; degrades to readable stacked/wrapped cards when JS is off.
   ========================================================================= */
.reviews { padding-top: clamp(16px, 2.5vh, 36px); padding-bottom: clamp(46px, 7vh, 86px); }
.reviews__head { text-align: center; max-width: 40ch; margin: 0 auto clamp(26px, 3.2vw, 40px); }
.reviews__title { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.12; font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.01em; }

.revs { position: relative; max-width: 1000px; margin-inline: auto; }
.revs__viewport { width: 100%; }
.revs__track { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 0; padding: 0; align-items: stretch; }
.revs__slide { flex: 0 0 100%; padding: 8px; box-sizing: border-box; }
@media (min-width: 760px) { .revs__slide { flex-basis: 50%; } }

/* JS on -> sliding carousel (viewport clips, track translates) */
.js .revs__viewport { overflow: hidden; }
.js .revs__track { flex-wrap: nowrap; justify-content: flex-start; transition: transform .55s var(--ease); will-change: transform; }

.rev {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: .9rem;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 13px;
  padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 28px);
}
.rev::before {
  content: "\201C"; position: absolute; top: .02em; left: .18em;
  font-family: var(--serif); font-size: 3.6rem; line-height: 1;
  color: var(--brass); opacity: .22; pointer-events: none;
}
.rev__quote { position: relative; z-index: 1; font-family: var(--serif); font-style: italic; color: var(--ink); font-size: clamp(1.04rem, 1.35vw, 1.18rem); line-height: 1.5; }
.rev__meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem .9rem; flex-wrap: wrap; }
.rev__author { font-weight: 600; font-size: .9rem; color: var(--tx); }
.rev__src { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; padding: .2em .62em; border-radius: 999px; border: 1px solid var(--line); color: var(--tx-soft); }

/* minimal arrows, overlaid at the edges — only when JS upgrades the carousel */
.revs__nav { display: none; }
.js .revs__nav {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  font-size: 1.5rem; line-height: 1; padding-bottom: 3px;
  box-shadow: 0 4px 14px rgba(16, 45, 80, .12);
  opacity: .82; transition: opacity .2s, background .2s, color .2s;
}
.js .revs__nav:hover, .js .revs__nav:focus-visible { opacity: 1; background: var(--ink); color: var(--tx-light); }
.js .revs__nav--prev { left: -8px; }
.js .revs__nav--next { right: -8px; }
@media (max-width: 520px) { .js .revs__nav--prev { left: 2px; } .js .revs__nav--next { right: 2px; } }

.revs__dots { display: flex; justify-content: center; gap: 8px; margin-top: clamp(18px, 2.4vw, 26px); }
.revs__dots:empty { display: none; }
.revs__dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--line); cursor: pointer; transition: background .2s, transform .2s; }
.revs__dot:hover { background: var(--brass-2); }
.revs__dot.is-active { background: var(--brass); transform: scale(1.3); }

.revs__dots { margin-bottom: 4px; }