/*
Theme Name: corelaw Rechtsschutz
Theme URI: https://www.corelaw.de/
Author: ibx company
Author URI: https://ibx-company.de/
Description: Maßgeschneidertes Theme für corelaw Rechtsanwälte, Hannover. Editorial-Design (Allston-Stil), monochrom mit Navy-Akzent, SEO/GEO-optimierte Seiten-Templates. Inhalte über die Meta-Box „Inhalte bearbeiten" pflegbar.
Version: 1.58.0
Requires at least: 6.0
Requires PHP: 7.4
License: proprietary
Text Domain: corelaw
*/

/* ============================================================
   corelaw — Editorial / Architektur-Stil (nach Allston)
   Monochrom: Weiß · #090909 · Grau  ·  Navy #293C74 = Mini-Akzent
   Typo: Open Sans 300 UPPERCASE (Headlines) · Raleway (Text)
   ============================================================ */

:root {
  --ink: #0a0a0a;
  --grey: #585858;
  --grey-2: #8f8f8f;
  --line: #e7e7e7;
  --paper: #ffffff;
  --paper-2: #f6f5f3;
  --navy: #293c74;

  --f-head: "Open Sans", -apple-system, sans-serif;
  --f-body: "Raleway", -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1320px;
  --pad: clamp(24px, 5vw, 90px);
  /* Abstand Vorspann-Zeile (.rgw-kicker) zur Überschrift — überall gleich */
  --kicker-gap: clamp(26px, 2.6vw, 36px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Kein horizontales Verschieben: das ausgeblendete Menü liegt rechts außerhalb und
   erlaubt sonst (v. a. auf iOS) seitliches Scrollen — dann sitzen alle Inhalte schief. */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: .4px;
  color: var(--grey);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--navy); color: #fff; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(80px, 11vw, 155px) 0; }
.section.tight { padding: clamp(60px, 8vw, 110px) 0; }
.bg-soft { background: var(--paper-2); }
.bg-faint { background: #fafaf9; }
.center { text-align: center; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 300;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.32;
  letter-spacing: .12em;
}
.display { font-size: clamp(30px, 5vw, 62px); font-weight: 300; letter-spacing: .1em; line-height: 1.24; }
.h1 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: .12em; }
.h2 { font-size: clamp(24px, 2.8vw, 34px); }
.h3 { font-size: 19px; letter-spacing: .14em; }

/* Eyebrow / Mikro-Label */
.eyebrow {
  font-family: var(--f-head);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--navy);
  display: inline-block;
}
.eyebrow.grey { color: var(--grey-2); }

/* Vorspann-Zeile → Überschrift: überall derselbe Abstand (2026-08-06).
   :where() hält die Spezifität bei 0 — Sonderfälle wie der Seitenkopf, der
   seine Abstände an die Fensterhöhe koppelt, behalten damit ihren Wert. */
:where(.rgw-kicker, .eyebrow) + :where(h1, h2, .h1, .h2, .rgw-h2, .rgw-display) { margin-top: var(--kicker-gap); }

.lead { font-size: 16px; line-height: 2; color: var(--grey); max-width: 60ch; }
p { margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }

/* gepunkteter Trenner (Allston-Signatur) */
.dotsep { width: 90px; height: 0; border-top: 2px dotted #cfcfcf; margin: 26px auto 0; }
.dotsep.left { margin-left: 0; }
.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- Buttons / Links ---------- */
.btn {
  display: inline-block;
  font-family: var(--f-head);
  font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  padding: 13px 30px; border: 1px solid rgba(10,10,10,.16); color: var(--ink);
  background: transparent; cursor: pointer; position: relative; --btn-line: var(--navy);
  transition: color .45s var(--ease);
}
/* dezente Outline, die beim Hover einmal ringsum läuft – kein Füllen */
.btn::before, .btn::after { content: ""; position: absolute; box-sizing: content-box; width: 0; height: 0; pointer-events: none; }
.btn::before { top: -1px; left: -1px; border-top: 1px solid var(--btn-line); border-left: 1px solid var(--btn-line); transition: width .35s var(--ease) .35s, height .35s var(--ease); }
.btn::after  { right: -1px; bottom: -1px; border-bottom: 1px solid var(--btn-line); border-right: 1px solid var(--btn-line); transition: width .35s var(--ease) .35s, height .35s var(--ease); }
.btn:hover { color: var(--btn-line); }
.btn:hover::before, .btn:hover::after { width: calc(100% + 2px); height: calc(100% + 2px); }
.btn:hover::before { transition: width .35s var(--ease), height .35s var(--ease) .35s; }
.btn:hover::after  { transition: width .35s var(--ease), height .35s var(--ease) .35s; }
.btn.light { border-color: rgba(255,255,255,.3); color: #fff; --btn-line: #fff; }
.btn.light:hover { color: #fff; }
.btn.navy { border-color: rgba(41,60,116,.35); color: var(--navy); --btn-line: var(--navy); }
.btn.solid { background: var(--ink); color: #fff; border-color: var(--ink); --btn-line: #fff; }
.btn.solid:hover { color: #fff; }

.arrowlink {
  font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; gap: 12px;
  transition: color .4s var(--ease), gap .4s var(--ease);
}
.arrowlink .ln { width: 30px; height: 1px; background: var(--ink); transition: width .4s var(--ease), background .4s var(--ease); }
.arrowlink:hover { color: var(--navy); gap: 18px; }
.arrowlink:hover .ln { width: 44px; background: var(--navy); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.18);
  transition: all .5s var(--ease);
}
.site-header.solid { background: rgba(255,255,255,.96); backdrop-filter: blur(10px); padding: 16px 0; border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.logo {
  font-family: var(--f-head); font-weight: 300; font-size: 24px; letter-spacing: .22em; text-transform: uppercase; color: #fff;
  transition: color .5s var(--ease);
}
.logo b { font-weight: 700; }
.logo .dot { color: var(--navy); }
.site-header.solid .logo { color: var(--ink); }
/* Bild-Logo: immer in Originalfarbe, größer. Footer (dunkel) weiß. */
.logo-img { height: 48px; width: auto; display: block; filter: none; transition: height .5s var(--ease), filter .5s var(--ease); }
.site-header.solid .logo-img { height: 42px; }
/* Startseite + Unterseiten mit dunklem Bild-Header: Logo weiß über dem Foto, farbig sobald Header weiß (solid) */
body.home .site-header:not(.solid) .logo-img,
body:has(.page-head.img) .site-header:not(.solid) .logo-img { filter: brightness(0) invert(1); }
.footer .logo-img { filter: brightness(0) invert(1); height: 50px; }
/* DAV-Logo unter den Kontaktdaten – weiße Schrift, ohne Hintergrund, mit Label */
.footer .dav-block { margin-top: 26px; }
.footer .dav-label { display: block; font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 12px; }
.footer .dav-logo { height: 84px; width: auto; }
.nav-links { display: flex; gap: 38px; }
.nav-links a {
  font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.85); padding: 8px 0; position: relative; transition: color .4s var(--ease);
}
.nav-links a::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background: var(--navy); transition: width .4s var(--ease); }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.site-header.solid .nav-links a { color: var(--grey); }
.site-header.solid .nav-links a:hover, .site-header.solid .nav-links a.active { color: var(--ink); }
/* Rechte Seite: Termin-Button + Icons */
.nav-right { display: flex; align-items: center; gap: 26px; }
.nav-cta { font-family: var(--f-head); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.55); padding: 14px 26px; color: rgba(255,255,255,.9); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.nav-cta:hover { background: rgba(255,255,255,.14); color: #fff; }
.site-header.solid .nav-cta { border-color: var(--ink); color: var(--ink); }
.site-header.solid .nav-cta:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.nav-ic { background: none; border: 0; padding: 0; cursor: pointer; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); transition: color .4s var(--ease); }
.nav-ic svg { width: 100%; height: 100%; }
.search-ic svg { stroke: currentColor; fill: none; stroke-width: 1.5; }
.menu-ic { width: 20px; height: 20px; transition: color .4s var(--ease), transform .55s var(--ease); }
.menu-ic svg { fill: currentColor; stroke: none; }
.menu-ic svg rect { transform-box: fill-box; transform-origin: center; transition: transform .45s var(--ease); }
.menu-ic:hover { transform: rotate(90deg); }
.menu-ic:hover svg rect { transform: scale(.55); }
.nav-ic:hover { color: #fff; }
.site-header.solid .nav-ic { color: var(--grey); }
.site-header.solid .nav-ic:hover { color: var(--navy); }
/* Seiten ohne Kopfbild (Fehlerseite) haben oben eine helle Fläche — dort wäre
   das weiße Menüsymbol unsichtbar. Gleiche Bedingung wie beim Logo darüber. */
body:not(.home):not(:has(.page-head.img)) .site-header:not(.solid) .nav-ic { color: var(--grey); }
body:not(.home):not(:has(.page-head.img)) .site-header:not(.solid) .nav-ic:hover { color: var(--navy); }

/* ---------- Hero (fullscreen) ---------- */
.hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; background: #0a0a0a; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2.6s cubic-bezier(.4, 0, .2, 1); }
.hero-slide.on { opacity: 1; }
.hero-slide .img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.09); transition: transform 12s cubic-bezier(.25,.1,.25,1); }
.hero-slide.on .img { transform: scale(1.0); }
.hero-slide::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.55) 100%); }
.hero-inner { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 84px; }
.hero-inner .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero .eyebrow { color: #fff; opacity: .85; margin-bottom: 28px; }
.hero .eyebrow::before { content:""; display:inline-block; width: 46px; height:1px; background: var(--navy); vertical-align: middle; margin-right: 18px; }
.hero .display { color: #fff; max-width: none; font-size: clamp(28px, 5vw, 60px); font-weight: 300; letter-spacing: .09em; line-height: 1.24; }
.hero p { color: rgba(255,255,255,.85); max-width: 48ch; margin: 30px 0 44px; font-size: 16px; }
/* SEO-H1 nur für Suchmaschinen/KI (unsichtbar), dezente Subheadline + CTAs im Hero */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-cta { position: absolute; left: 0; right: 0; top: 58%; z-index: 5; padding: 0 var(--pad); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-cta .hero-sub { color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.65; max-width: 620px; margin: 0; }

/* Pfeile + Zähler (Allston) */
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.5); background: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.hero-arrow:hover { background: #fff; color: #0a0a0a; border-color: #fff; }
.hero-arrow.prev { left: var(--pad); } .hero-arrow.next { right: var(--pad); }
.hero-count { position: absolute; z-index: 6; right: max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))); top: auto; bottom: clamp(112px, 14vw, 236px); transform: none; display: flex; align-items: center; gap: 5px; font-family: var(--f-head); font-weight: 300; font-size: 15px; letter-spacing: .2em; color: rgba(255,255,255,.85); }
.hero-count b { font-weight: 600; color: #fff; }
.hero-count .hc-n { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 4px 3px; font-family: var(--f-head); font-weight: 400; font-size: 15px; letter-spacing: .2em; color: rgba(255,255,255,.72); cursor: pointer; transition: color .35s var(--ease); }
.hero-count .hc-n:hover { color: #fff; }
.hero-count .hc-n.on { color: #fff; font-weight: 600; }
.hero-count .sep { color: rgba(255,255,255,.4); }

/* Weiße Info-Cards, die ins Hero ragen (Signatur) */
/* Karten ragen bis zur Mitte ins Hero: obere Hälfte über dem echten Slider-Bild, untere Hälfte auf Weiß. Kein aufgesetztes Bild. */
.hero-cards-wrap { position: relative; z-index: 14; margin-top: clamp(-210px, -12.5vw, -80px);
  /* oben transparent (Hero scheint durch), unterhalb der Hero-Kante Beige wie die Sektion darunter */
  background: linear-gradient(to bottom, transparent 0, transparent clamp(80px, 12.5vw, 210px), var(--paper-2) clamp(80px, 12.5vw, 210px)); }
.hero-cards { background: #fff; display: grid; grid-template-columns: repeat(3, 1fr); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.hero-cards .icard { border: 0; border-left: 1px solid var(--line); margin: 0; }
.hero-cards .icard:first-child { border-left: 0; }
/* Karten nacheinander einklappen, knackig „tack tack tack" (Fold-down von der Oberkante) */
.hero-cards .icard.rv {
  opacity: 0; transform: perspective(1400px) rotateX(-82deg); transform-origin: 50% 0;
  transition: opacity .26s var(--ease) var(--d, 0s), transform .42s cubic-bezier(.2, .85, .25, 1) var(--d, 0s), background .4s var(--ease);
}
.hero-cards .icard.rv.in { opacity: 1; transform: perspective(1400px) rotateX(0deg); }
.hero-cards .icard:nth-child(1) { --d: 0s; }
.hero-cards .icard:nth-child(2) { --d: .12s; }
.hero-cards .icard:nth-child(3) { --d: .24s; }
.hero-slide.on .fade-seq { animation: rise 1.1s var(--ease) both; }
.hero-slide.on .fade-seq:nth-child(2){animation-delay:.12s} .hero-slide.on .fade-seq:nth-child(3){animation-delay:.24s} .hero-slide.on .fade-seq:nth-child(4){animation-delay:.36s}
@keyframes rise { from { opacity:0; transform: translateY(30px);} to {opacity:1; transform:none;} }
.hero-ui { position: absolute; z-index: 5; bottom: 40px; left: 0; right: 0; }
.hero-ui .wrap { display: flex; justify-content: space-between; align-items: center; }
.hero-dots { display: flex; gap: 12px; }
.hero-dots button { width: 40px; height: 2px; border: 0; background: rgba(255,255,255,.35); cursor: pointer; transition: background .4s; }
.hero-dots button.on { background: #fff; }
.hero-scroll { color: rgba(255,255,255,.7); font-family: var(--f-head); font-weight:600; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }

/* ---------- Page-Header (Unterseiten) ---------- */
.page-head { position: relative; padding: 210px 0 90px; background: var(--paper); border-bottom: 1px solid var(--line); }
.page-head .eyebrow { margin-bottom: 22px; }
.page-head h1 { max-width: 22ch; margin-top: 20px; }
.breadcrumb { font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-2); margin-top: 26px; }
.breadcrumb a:hover { color: var(--navy); }
.page-head.img { padding: 240px 0 96px; background: #0a0a0a; border: 0; overflow: hidden; }
.page-head.img .bg { position:absolute; inset:0; background-size:cover; background-position:center 62%; filter: none; opacity:.68; transform-origin: center; animation: headZoom 24s var(--ease) infinite alternate; }
@keyframes headZoom { 0% { transform: scale(1.0); } 100% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .page-head.img .bg { animation: none; } }
/* Verdunkelung des Kopfbilds (heller seit 06.08.2026): das Motiv bleibt sichtbar,
   der waagerechte Verlauf hält nur die linke Textspalte kontrastreich. */
.page-head.img::after { content:""; position:absolute; inset:0; background:
	linear-gradient(90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.24) 45%, rgba(0,0,0,.06) 72%, rgba(0,0,0,0) 100%),
	linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.44)); }
.page-head.img .wrap { position: relative; z-index: 2; }
.page-head.img h1, .page-head.img .eyebrow { color: #fff; }
.page-head.img .breadcrumb { color: rgba(255,255,255,.7); }

/* ---------- Intro / Statement ---------- */
/* Bild links bis zum Bildschirmrand (Full-Bleed), Text rechts an Content-Kante ausgerichtet, Bild so hoch wie der Text */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.intro-grid .side { position: static; align-self: center; padding-left: clamp(28px, 4vw, 64px); padding-right: max(var(--pad), calc((100vw - 1320px) / 2 + var(--pad))); padding-bottom: clamp(40px, 4.5vw, 60px); }
.intro-photo { position: relative; align-self: stretch; min-height: 480px; overflow: hidden; }
.intro-photo .intro-photo-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1s var(--ease); }
.intro-photo:hover .intro-photo-img { transform: scale(1.05); }
/* innenliegender Frame im Bild (Allston-Signatur) */
.intro-photo::after { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(255,255,255,.65); pointer-events: none; z-index: 1; }
.statement { max-width: 30ch; }
.big-quote { font-family: var(--f-head); font-weight: 300; text-transform: none; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.5; letter-spacing: .01em; color: var(--ink); }
.big-quote b { font-weight: 600; }
/* Linie fährt von der Bildschirmkante (ganz links) herein und endet bei „Strategie." */
/* block-level: Eyebrow bleibt darüber; fit-content: rechte Kante liegt bei „Strategie." */
.intro-sec { overflow-x: clip; padding-top: clamp(50px, 6vw, 92px); padding-bottom: 0; }
.strat-head { position: relative; display: block; width: -moz-fit-content; width: fit-content; padding-bottom: 46px; }
.strat-head .strat-line {
  position: absolute; right: 0; bottom: 0;      /* rechte Kante bei „Strategie." */
  width: 100vw; height: 2px; background: var(--navy);
  transform: translateX(-100%);                 /* startet komplett links außerhalb des Screens */
  transition: transform 1.15s var(--ease) .35s;
}
.side.rv.in .strat-head .strat-line { transform: translateX(0); }

/* ---------- Icon-Cards (Leistungen) ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.icard {
  position: relative; overflow: hidden;
  padding: clamp(36px, 4vw, 60px) clamp(24px, 3vw, 46px); text-align: center;
  border: 1px solid var(--line); margin: -1px 0 0 -1px; background: #fff;
  transition: background .4s var(--ease);
}
/* Hover: dezent hervorheben + Navy-Linie an der Unterkante (kein Glanz) */
.icard::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--navy); transform: scaleX(0); transition: transform .45s var(--ease); z-index: 4;
}
.icard:hover { background: #faf9f7; }
.icard:hover::after { transform: scaleX(1); }
@keyframes cardGlint { from { left: -60%; } to { left: 135%; } }
.icard .ico { width: 54px; height: 54px; margin: 0 auto 26px; color: var(--ink); }
.icard .ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.2; }
.icard h3 { margin-bottom: 16px; }
.icard p { font-size: 14px; }
.icard .dotsep { margin: 22px auto 0; }
.icard .more { display: inline-block; margin-top: 22px; font-family: var(--f-head); font-weight:600; font-size: 11px; letter-spacing:.2em; text-transform:uppercase; color: var(--grey-2); }

/* Rechtsgebiete – große Liste (Index-Stil) */
.rg-index { border-top: 1px solid var(--line); }
.rg-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 30px; align-items: center; padding: 40px 10px; border-bottom: 1px solid var(--line); position: relative; transition: padding .5s var(--ease); }
.rg-row .num { font-family: var(--f-head); font-weight: 300; font-size: 15px; letter-spacing: .12em; color: var(--grey-2); }
.rg-row h3 { font-size: clamp(20px, 2.4vw, 30px); transition: color .4s var(--ease), transform .5s var(--ease); }
.rg-row .desc { font-size: 14px; max-width: 40ch; color: var(--grey-2); }
.rg-row .go { font-family: var(--f-head); font-weight:600; font-size: 11px; letter-spacing:.2em; text-transform:uppercase; color: var(--navy); opacity: 0; transform: translateX(-10px); transition: all .5s var(--ease); }
.rg-row:hover { padding-left: 26px; background: var(--paper-2); }
.rg-row:hover h3 { color: var(--navy); }
.rg-row:hover .go { opacity: 1; transform: none; }
.rg-row .cover { position: absolute; }

/* Rechtsgebiete – blaue Sektion mit 6 Kacheln im 3×2-Raster */
.rg-block { background: var(--navy); }
.rg-block .eyebrow { color: rgba(255,255,255,.9); }
/* Testimonial-Kopf: Badge links, Headline/Subline linksbündig daneben */
.stimmen-head { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); text-align: left; }
.stimmen-head .eyebrow, .stimmen-head h2 { text-align: left; }
.stimmen-badge { height: clamp(104px, 12vw, 150px); width: auto; flex-shrink: 0; display: block; }
@media (max-width: 640px) { .stimmen-head { flex-direction: column; align-items: flex-start; gap: 18px; } .stimmen-badge { height: 96px; } }
.rg-block .h1 { color: #fff; }
.rg-block .hairline { display: block; width: 70px; height: 1px; background: rgba(255,255,255,.4); margin: 30px auto 0; }
.rg-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr;
  border-top: 1px solid rgba(255,255,255,.18);
}
.rg-tile {
  position: relative; display: block; padding: clamp(24px, 2.2vw, 38px);
  border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18);
  transition: background .4s var(--ease);
}
.rg-tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.rg-tile .num { font-family: var(--f-head); font-weight: 300; font-size: 23px; letter-spacing: .12em; color: rgba(255,255,255,.5); }
.rg-tile h3 { color: #fff; font-size: clamp(18px, 1.65vw, 22px); margin: 12px 0 14px; }
.rg-tile h3::after { content: ""; display: block; width: 46px; height: 1px; background: rgba(255,255,255,.35); margin-top: 15px; }
.rg-tile .desc { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.8; max-width: 40ch; }
.rg-tile .go { display: inline-block; margin-top: 16px; font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateX(-8px); transition: all .45s var(--ease); }
.rg-tile:hover { background: rgba(255,255,255,.06); }
.rg-tile:hover::after { transform: scaleX(1); }
.rg-tile:hover .go { opacity: 1; transform: none; }
/* Kacheln nacheinander einklappen (Fold-down von der Oberkante); Hover-Hintergrund ohne Delay */
.rg-tiles .rg-tile.rv {
  opacity: 0; transform: perspective(1400px) rotateX(-82deg); transform-origin: 50% 0;
  transition: opacity .26s var(--ease) var(--d, 0s), transform .42s cubic-bezier(.2, .85, .25, 1) var(--d, 0s), background .4s var(--ease);
}
.rg-tiles .rg-tile.rv.in { opacity: 1; transform: perspective(1400px) rotateX(0deg); }
.rg-tiles .rg-tile:nth-child(1) { --d: 0s; }
.rg-tiles .rg-tile:nth-child(2) { --d: .12s; }
.rg-tiles .rg-tile:nth-child(3) { --d: .24s; }
.rg-tiles .rg-tile:nth-child(4) { --d: .36s; }
.rg-tiles .rg-tile:nth-child(5) { --d: .48s; }
.rg-tiles .rg-tile:nth-child(6) { --d: .60s; }
.rg-tiles .rg-tile:nth-child(7) { --d: .72s; }
/* Alle Kacheln gleich groß: linke Rasterlinie sitzt an der ersten Kachel jeder Reihe,
   die 7. Kachel bleibt eine normale Zelle und steht mittig (statt volle Breite). */
.rg-tiles .rg-tile:nth-child(3n+1) { border-left: 1px solid rgba(255,255,255,.18); }
.rg-tiles .rg-tile:nth-child(7) { grid-column: 2; }
@media (max-width: 1000px) {
  .rg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-tiles .rg-tile:nth-child(3n+1) { border-left: 0; }
  .rg-tiles .rg-tile:nth-child(2n+1) { border-left: 1px solid rgba(255,255,255,.18); }
  .rg-tiles .rg-tile:nth-child(7) { grid-column: auto; }
}
@media (max-width: 620px) {
  .rg-tiles { grid-template-columns: 1fr; }
  .rg-tiles .rg-tile:nth-child(n) { border-left: 1px solid rgba(255,255,255,.18); }
}

/* ---------- Full-bleed Bildband ---------- */
.imgband { height: clamp(360px, 55vw, 620px); background-size: cover; background-position: center; filter: none; position: relative; overflow: hidden; }
.imgband.color { filter: none; }
/* Kennzahlen als kleine Leiste im unteren Drittel des Bildes */
.imgband-stats { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(60px, 9vw, 110px) 0 clamp(24px, 2.6vw, 38px); background: linear-gradient(to top, rgba(14,19,34,.80), rgba(14,19,34,.44) 52%, transparent); }
.stats-over .stat { padding: 4px 22px; border-left-color: rgba(255,255,255,.22); }
.stats-over .stat .n { color: #fff; font-size: clamp(24px, 2.7vw, 36px); }
.stats-over .stat .n em { color: #fff; }
.stats-over .stat .l { color: rgba(255,255,255,.72); margin-top: 9px; }

/* ---------- Ablauf – 5 Schritte als Kette ---------- */
/* Ablauf-Sektion im Dessau-Stil: Icon links, Überschrift daneben, Text darunter, linksbündig */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(36px, 3.5vw, 58px) clamp(30px, 3vw, 48px); list-style: none; }
.step { text-align: left; }
.step .s-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.step .s-ic { width: 42px; height: 42px; flex-shrink: 0; }
.step .s-ic svg { width: 100%; height: 100%; stroke: var(--navy); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { font-size: 14px; letter-spacing: .05em; margin: 0; line-height: 1.4; }
.step p { font-size: 13.5px; line-height: 1.9; color: var(--grey); margin: 0; max-width: 34ch; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.imgband-wrap { position: relative; }

/* ---------- Zahlen ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { text-align: center; padding: 30px 20px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat .n { font-family: var(--f-head); font-weight: 300; font-size: clamp(34px, 4vw, 52px); color: var(--ink); line-height: 1; letter-spacing: .04em; }
.stat .n em { font-style: normal; color: var(--navy); font-size: .4em; vertical-align: middle; margin-left: 3px; }
.stat .l { font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-2); margin-top: 16px; }

/* ---------- Anwälte ---------- */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.member .ph { aspect-ratio: 3/3.7; overflow: hidden; background: var(--paper-2); perspective: 1500px; position: relative; }
/* Innenliegender Rahmen – zeichnet sich beim Reinscrollen (.in) einmal umlaufend (0°→360°, flache .ph-Ebene) */
@property --frame-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes frameDraw { from { --frame-a: 0deg; } to { --frame-a: 360deg; } }
.member .ph::after {
  content:""; position:absolute; inset:16px; z-index:3; pointer-events:none;
  padding:1px;
  background: conic-gradient(from -90deg, rgba(255,255,255,.62) var(--frame-a), transparent 0deg) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  --frame-a: 0deg;
}
.member.in .ph::after { animation: frameDraw 1.15s var(--ease) forwards; }
/* Flip-Karte: Foto vorn, Beschreibung hinten (dreht bei Hover) */
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform .75s var(--ease); transform-style: preserve-3d; }
.member:hover .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.flip-front img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.flip-back { transform: rotateY(180deg); background: var(--navy); color: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(24px, 3vw, 42px); }
.flip-back p { font-size: 14px; line-height: 1.95; margin: 0; }
/* Zoom-Angleichung der beiden Männer (Foto-Vorderseite) */
.member.rv-0 .flip-front img, .member.rv-2 .flip-front img { transform-origin: center 30%; }
.member.rv-2 .flip-front img { transform: scale(1.19); }
.member.rv-0 .flip-front img { transform: scale(1.28) translateY(-4%); }
/* Touch-Geräte ohne Hover: Flip-Karten gibt es nicht mehr, deshalb nur noch
   die Flip-Reste neutralisieren. Das Format von .member .ph bleibt IMMER 3/3.7,
   sonst wachsen die Porträts auf iPad ins Unendliche und überlappen einander. */
@media (hover: none) {
  .member .ph { perspective: none; }
  .flip-inner { transform: none !important; transform-style: flat; }
  .flip-face { position: static; backface-visibility: visible; }
  .flip-front { aspect-ratio: 3/3.7; overflow: hidden; position: relative; }
  .flip-front::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,.55); pointer-events: none; z-index: 3; }
  .flip-back { transform: none; background: transparent; color: var(--grey); text-align: center; padding: 16px 4px 0; display: block; }
  .member.rv-0 .flip-front img, .member.rv-2 .flip-front img { transform: none; }
}
.member .meta { padding-top: 28px; text-align: center; }
.member h3 { font-size: 20px; margin-bottom: 10px; }
.member .role { font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.member .dotsep { margin-top: 20px; }
.member p { font-size: 14px; margin-top: 18px; }

/* ---------- Bewertungen ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); }
.review { padding: clamp(34px, 3.4vw, 52px); border-left: 1px solid var(--line); }
.review:first-child { border-left: 0; }
.review .stars { color: var(--navy); letter-spacing: 5px; font-size: 12px; }
.review p { font-family: var(--f-head); font-weight: 300; text-transform: none; font-size: 18px; line-height: 1.6; color: var(--ink); margin: 22px 0 26px; }
.review .who { font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-2); }
/* Mandantenstimmen auf navy: helle Rahmen und Texte */
.rg-block .reviews { border-color: rgba(255,255,255,.22); }
.rg-block .review { border-left-color: rgba(255,255,255,.22); border-top-color: rgba(255,255,255,.22); }
.rg-block .review .stars { color: #fff; }
.rg-block .review p { color: #fff; }
.rg-block .review .who { color: rgba(255,255,255,.6); }

/* ---------- News ---------- */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.post .thumb { aspect-ratio: 1/1; overflow: hidden; }
.post .thumb div { width: 100%; height: 100%; background-size: cover; background-position: center; filter: none; transition: filter .8s var(--ease), transform 1s var(--ease); }
.post:hover .thumb div { filter: grayscale(0%); transform: scale(1.04); }
.post .cat { margin-top: 26px; font-family: var(--f-head); font-weight:600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.post h3, .post .post-h { font-size: 18px; letter-spacing: .06em; margin: 14px 0 12px; line-height: 1.5; }
.post .date { font-size: 12px; color: var(--grey-2); letter-spacing: .08em; }

/* ---------- CTA-Band ---------- */
.cta { position: relative; overflow: hidden; background: #0a0a0a; text-align: center; }
.cta .bg { position:absolute; inset:0; background-size:cover; background-position:center; filter: none; opacity: 1; }
.cta::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.28); }
.cta .wrap { position: relative; z-index: 2; }
.cta .eyebrow { color:#fff; opacity:.8; }
.cta h2 { color:#fff; margin: var(--kicker-gap) 0 40px; }
/* Die beiden CTA-Buttons stehen im Markup nebeneinander (durch &nbsp; getrennt).
   Eigener Außenabstand, damit sie beim Umbruch nicht aneinanderkleben. */
.cta .btn { margin: 7px 8px; }
@media (max-width: 560px) {
  /* mobil untereinander, gleich breit und mittig */
  .cta .btn { display: block; width: min(300px, 100%); margin: 9px auto; }
}

/* ---------- Termin-Modi ---------- */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); }
.mode { position: relative; overflow: hidden; text-align:center; padding: clamp(36px,4vw,58px) clamp(22px,3vw,40px); border:1px solid var(--line); margin:-1px 0 0 -1px; background:#fff; }
.mode::before { content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; background: linear-gradient(115deg, transparent 38%, rgba(41,60,116,.13) 50%, transparent 62%); transform: skewX(-18deg); z-index:4; pointer-events:none; }
.mode:hover::before { animation: cardGlint .85s ease; }
.mode .ico { width: 46px; height: 46px; margin: 0 auto 24px; color: var(--navy); }
.mode .ico svg { width:100%; height:100%; stroke: currentColor; fill:none; stroke-width:1.2; }
.mode h3 { font-size: 17px; margin-bottom: 14px; }
.mode p { font-size: 14px; }

/* ---------- FAQ ---------- */
.faq-search { display:flex; align-items:center; gap: 14px; border:1px solid var(--line); padding: 16px 22px; max-width: 520px; margin-bottom: 50px; }
.faq-search input { border:0; outline:0; font-family: var(--f-body); font-size: 15px; width:100%; color: var(--ink); background: transparent; }
.faq-search .ic { color: var(--grey-2); }
.faq-list { max-width: 860px; border-top: 1px solid var(--line); }
.faq-nav { display:flex; flex-wrap:wrap; gap:10px; max-width:860px; margin: -14px 0 52px; }
.faq-nav a { font-family:var(--f-head); font-weight:300; text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--grey); border:1px solid var(--line); padding:9px 16px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.faq-nav a:hover { color:var(--navy); border-color:var(--navy); }
.faq-group { max-width:860px; margin: 0 auto clamp(18px,2vw,28px); padding: clamp(26px,3vw,44px) 0; position: relative; scroll-margin-top:130px; }
/* Jede zweite Sammlung liegt auf getönter Fläche — so trennen sich die
   Kategorien beim Scrollen sichtbar voneinander (06.08.2026). */
.faq-group::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background: var(--paper-2); z-index:0; opacity:0; }
.faq-group:nth-of-type(even)::before { opacity:1; }
.faq-group > * { position: relative; z-index: 1; }
.faq-group.hide { display:none; }
.faq-cat { font-family:var(--f-head); font-weight:300; text-transform:uppercase; letter-spacing:.1em; font-size:21px; color:var(--ink); margin: 0 0 18px; display:flex; align-items:baseline; gap:12px; }
.faq-cnt { font-size:13px; color:var(--grey-2); letter-spacing:.05em; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width:100%; background:none; border:0; cursor:pointer; text-align:left; display:flex; justify-content:space-between; gap:24px; align-items:center; padding: 30px 6px; font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .08em; font-size: 16px; color: var(--ink); transition: color .4s var(--ease); }
.faq-q:hover { color: var(--navy); }
.faq-q .pm { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-q .pm::before, .faq-q .pm::after { content:""; position:absolute; background: var(--navy); transition: transform .4s var(--ease); }
.faq-q .pm::before { top:50%; left:0; width:16px; height:1.5px; transform: translateY(-50%); }
.faq-q .pm::after { left:50%; top:0; width:1.5px; height:16px; transform: translateX(-50%); }
.faq-item.open .pm::after { transform: translateX(-50%) scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.faq-a p { padding: 0 40px 30px 6px; font-size: 15px; color: var(--grey); max-width: 74ch; }

/* ---------- Downloads ---------- */
.dl-filter { display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 44px; }
.chip { font-family: var(--f-head); font-weight:400; font-size: 12px; letter-spacing:.14em; text-transform:uppercase; padding: 10px 22px; border:1px solid var(--line); background: transparent; color: var(--grey); cursor:pointer; transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.chip:hover { color: var(--navy); border-color: var(--navy); }
.chip.on { background: var(--navy); color:#fff; border-color: var(--navy); }
/* Gleiche Regel wie bei den Kachelrastern: Die Zeile zieht sich außen um ihren
   Innenabstand zurück, damit der Text bündig unter der Überschrift bleibt — die
   Hover-Fläche liegt dadurch ringsum mit Luft um den Text statt direkt darauf. */
.dl-list { --kachel-pad: 16px; border-top: 1px solid var(--line); margin-inline: calc(var(--kachel-pad) * -1); }
.dl-row { display:flex; align-items:center; gap: 24px; padding: 26px var(--kachel-pad); border-bottom:1px solid var(--line); transition: padding .4s var(--ease), background .4s var(--ease); }
.dl-row:hover { padding-left: calc(var(--kachel-pad) + 14px); background: var(--paper-2); }
.dl-row .ic { width: 26px; height: 26px; color: var(--navy); flex-shrink:0; }
.dl-row .ic svg { width:100%; height:100%; stroke: currentColor; fill:none; stroke-width:1.3; }
/* min-width:0, sonst schrumpft die Titelspalte im Flex-Layout nicht unter ihre
   längste Zeile — auf schmalen Displays schob sie „Download“ über den Rand. */
.dl-row .t { flex: 1; min-width: 0; overflow-wrap: break-word; }
.dl-row .t h3 { font-size: 15px; letter-spacing: .06em; margin-bottom: 4px; }
.dl-row .t span { font-size: 12px; color: var(--grey-2); letter-spacing: .06em; }
.dl-row .get { font-family: var(--f-head); font-weight:600; font-size: 11px; letter-spacing:.18em; text-transform:uppercase; color: var(--ink); white-space: nowrap; }
.dl-row:hover .get { color: var(--navy); }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.contact-info dl { border-top: 1px solid var(--line); margin-top: 34px; }
.contact-info .item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.contact-info dt { font-family: var(--f-head); font-weight:600; font-size: 11px; letter-spacing:.2em; text-transform:uppercase; color: var(--grey-2); margin-bottom: 8px; }
.contact-info dd { font-size: 16px; color: var(--ink); }
.contact-info dd a:hover { color: var(--navy); }
.map { width:100%; aspect-ratio: 3/2.6; border:0; filter: contrast(1.05); }
.cform { display: grid; gap: 22px; }
.cform .row2 { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cform label { font-family: var(--f-head); font-weight:600; font-size: 11px; letter-spacing:.16em; text-transform:uppercase; color: var(--grey-2); display:block; margin-bottom: 8px; }
.cform input, .cform textarea { width:100%; border:0; border-bottom:1px solid var(--line); padding: 10px 0; font-family: var(--f-body); font-size: 15px; color: var(--ink); background: transparent; outline: none; transition: border-color .4s; }
.cform input:focus, .cform textarea:focus { border-color: var(--navy); }

/* ---------- Legal (Impressum/Datenschutz) ---------- */
.legal { max-width: 820px; }
.legal h1 { margin-bottom: 6px; }
.legal h2 { font-size: 20px; letter-spacing: .1em; margin: 44px 0 14px; }
.legal h3 { font-family: var(--f-head); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .16em; color: var(--navy); margin: 28px 0 8px; }
.legal p, .legal li { font-size: 14.5px; color: var(--grey); }
.legal ul, .legal ol { margin: 0 0 16px 20px; }
.legal ul { list-style: disc; } .legal ol { list-style: decimal; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--navy); border-bottom: 1px solid var(--line); }
.legal a:hover { border-color: var(--navy); }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: rgba(255,255,255,.62); padding: clamp(60px, 7vw, 100px) 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer .logo { color:#fff; font-size: 26px; }
.footer .fintro { margin-top: 22px; font-size: 14px; max-width: 34ch; line-height: 1.9; }
.footer .fnotfall { margin-top: 26px; }
.footer .fnotfall-label { display: block; font-family: var(--f-head); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.footer .fnotfall a { font-family: var(--f-head); font-weight: 400; font-size: 21px; letter-spacing: .02em; color: #fff; transition: opacity .3s var(--ease); }
.footer .fnotfall a:hover { opacity: .7; }
.footer h4 { color:#fff; font-size: 12px; letter-spacing: .2em; margin-bottom: 22px; font-weight: 600; }
.footer li { margin-bottom: 12px; }
.footer li a { font-size: 13.5px; letter-spacing: .04em; transition: color .3s; }
.footer li a:hover { color: #fff; }
.footer .fcontact { font-size: 14px; line-height: 2; }
.footer .fcontact a:hover { color:#fff; }
.footer-note { display:flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 30px; font-family: var(--f-head); font-weight:600; font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.4); }
.ibx-by { display: inline-flex; align-items: center; gap: 8px; }
.ibx-credit-logo { height: 16px; width: auto; display: block; opacity: .8; transition: opacity .3s var(--ease); }
.ibx-by a:hover .ibx-credit-logo { opacity: 1; }
.fn-rights { display: inline-block; }
.footer-note a { color: inherit; transition: color .3s var(--ease); }
.footer-note a:hover { color: #fff; }
/* aktive Seite in den Footer-Spalten fett */
.footer-grid ul a[aria-current="page"] { color: #fff; font-weight: 700; }

/* Back to top */
/* Stapel unten rechts. Am Seitenanfang (bottom→oben): Barrierefreiheit · Kalender.
   Beim Scrollen erscheint Back-to-top im untersten Slot, die zwei anderen rücken je einen Slot nach oben. */
/* Ein-/Ausblenden über transform + kurze opacity, damit der Button nie halbtransparent
   wirkt (sonst scheint der Hintergrund durch und er sieht heller aus als die anderen). */
.to-top { position: fixed; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); width: 48px; height: 48px; border: 0; border-radius: 0; background: var(--navy); color: #fff; cursor: pointer; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .12s linear, transform .4s var(--ease), visibility .4s, background .3s; z-index: 60; box-shadow: 0 8px 22px rgba(10,10,10,.20); }
/* Termin-Button (Kalender-Icon) — immer sichtbar; Slot 1, beim Scrollen Slot 2 */
.cal-btn { position: fixed; right: clamp(20px, 3vw, 40px); bottom: calc(clamp(20px, 3vw, 40px) + 58px); width: 48px; height: 48px; background: var(--navy); color: #fff; display: grid; place-items: center; opacity: 1; visibility: visible; transform: none; transition: bottom .4s var(--ease), background .3s, color .3s; z-index: 60; box-shadow: 0 8px 22px rgba(10,10,10,.20); }
html.fabs-scrolled .cal-btn { bottom: calc(clamp(20px, 3vw, 40px) + 116px); }
.cal-btn:hover { background: #1f2f5c; }
.cal-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cal-btn.on-dark { background: #fff; color: var(--navy); box-shadow: 0 8px 22px rgba(0,0,0,.32); }
.cal-btn.on-dark:hover { background: #ece9e4; }
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: #1f2f5c; }
.to-top svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* auf dunklem/blauem Hintergrund hell */
.to-top.on-dark { background: #fff; color: var(--navy); box-shadow: 0 8px 22px rgba(0,0,0,.32); }
.to-top.on-dark:hover { background: #ece9e4; }

/* ===================== Barrierefreiheit-Widget ===================== */
/* Schlank, cookielos, kein Drittanbieter. Immer sichtbar. Slot 0 (unten); beim Scrollen Slot 1. */
.a11y-fab { position: fixed; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); width: 48px; height: 48px; border: 0; background: var(--navy); color: #fff; cursor: pointer; display: grid; place-items: center; z-index: 62; box-shadow: 0 8px 22px rgba(10,10,10,.20); transition: bottom .4s var(--ease), background .3s, color .3s; }
html.fabs-scrolled .a11y-fab { bottom: calc(clamp(20px, 3vw, 40px) + 58px); }
.a11y-fab:hover { background: #1f2f5c; }
/* auf dunklem/blauem Hintergrund hell — wie Back-to-top und Kalender */
.a11y-fab.on-dark { background: #fff; color: var(--navy); box-shadow: 0 8px 22px rgba(0,0,0,.32); }
.a11y-fab.on-dark:hover { background: #ece9e4; }
.a11y-fab svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.a11y-fab .ico-close { display: none; }
.a11y-open .a11y-fab .ico-open { display: none; }
.a11y-open .a11y-fab .ico-close { display: block; }
.a11y-panel { position: fixed; right: clamp(20px, 3vw, 40px); bottom: calc(clamp(20px, 3vw, 40px) + 58px); z-index: 63; width: 320px; max-width: calc(100vw - 40px); max-height: min(72vh, 560px); overflow-y: auto; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(11,14,20,.28); padding: 24px 24px 18px; transition: bottom .4s var(--ease); }
html.fabs-scrolled .a11y-panel { bottom: calc(clamp(20px, 3vw, 40px) + 116px); }
.a11y-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .a11y-panel:not([hidden]) { animation: a11yIn .22s var(--ease); } }
@keyframes a11yIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.a11y-panel h2 { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .1em; font-size: 17px; color: var(--ink); margin: 0 0 6px; }
.a11y-sub { font-size: 12.5px; color: var(--grey); margin: 0 0 18px; line-height: 1.6; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-opt { appearance: none; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 13px 8px 11px; font-family: var(--f-body); font-size: 12px; cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; line-height: 1.3; transition: border-color .2s, background .2s, color .2s; }
.a11y-opt svg { width: 22px; height: 22px; color: var(--navy); }
.a11y-opt:hover { border-color: var(--navy); }
.a11y-opt[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.a11y-opt[aria-pressed="true"] svg { color: #fff; }
.a11y-opt .a11y-state { font-size: 10px; opacity: .7; letter-spacing: .06em; text-transform: uppercase; }
.a11y-reset { grid-column: 1 / -1; margin-top: 2px; border: 1px solid var(--line); background: var(--paper); color: var(--grey); padding: 12px; font-family: var(--f-body); font-size: 12px; cursor: pointer; transition: background .2s, color .2s; }
.a11y-reset:hover { color: var(--navy); }
.a11y-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.6; color: var(--grey); }
.a11y-foot a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.a11y-fab:focus-visible, .a11y-opt:focus-visible, .a11y-reset:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (max-width: 560px) { .a11y-panel { width: calc(100vw - 40px); } }
/* Effekt-Klassen auf <html> */
html.a11y-fs1 { zoom: 1.09; } html.a11y-fs2 { zoom: 1.18; } html.a11y-fs3 { zoom: 1.28; }
html.a11y-underline a:not(.btn):not(.mnav-cta):not(.logo):not(.a11y-opt):not(.a11y-reset) { text-decoration: underline !important; text-underline-offset: 2px; }
html.a11y-readable p, html.a11y-readable li { line-height: 1.9 !important; letter-spacing: .012em !important; word-spacing: .05em !important; }
html.a11y-contrast { --grey: #33404f; --grey-2: #33404f; }
html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-1{transition-delay:.08s}.rv-2{transition-delay:.16s}.rv-3{transition-delay:.24s}.rv-4{transition-delay:.32s}.rv-5{transition-delay:.4s}

/* ---------- Menü-Drawer (¼ Breite, von rechts) ---------- */
.mnav-backdrop { position: fixed; inset: 0; background: rgba(10,10,10,.55); z-index: 199; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.mnav-backdrop.open { opacity: 1; pointer-events: auto; }
.mnav { position: fixed; top: 0; right: 0; bottom: 0; width: 24vw; min-width: 320px; max-width: 420px; background: var(--navy); z-index: 200; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(36px, 3.5vw, 52px); transform: translateX(100%); transition: transform .55s var(--ease); }
.mnav.open { transform: translateX(0); }
.mnav-links { display: flex; flex-direction: column; gap: 0; }
.mnav a { font-family: var(--f-head); font-weight: 400; text-transform: uppercase; letter-spacing: .13em; font-size: 14px; color: rgba(255,255,255,.82); padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.13); transition: color .35s var(--ease), padding-left .35s var(--ease); }
.mnav a:hover { color: #fff; padding-left: 8px; }
/* aktuelle Seite hervorheben — nur fettere Schrift, kein Marker */
.mnav-links a[aria-current="page"] { color: #fff; font-weight: 600; }
.mnav a.mnav-cta { margin-top: 20px; border: 1px solid rgba(255,255,255,.45); text-align: center; padding: 13px; font-size: 12px; letter-spacing: .18em; color: #fff; }
.mnav a.mnav-cta:hover { background: rgba(255,255,255,.14); padding-left: 13px; }
.mnav .close { position: absolute; top: 26px; right: clamp(36px,3.5vw,52px); background:none; border:0; color:#fff; font-size: 26px; line-height: 1; cursor:pointer; transition: transform .4s var(--ease); }
.mnav .close:hover { transform: rotate(90deg); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .nav-links, .nav-cta, .search-ic { display: none; }
  .intro-grid, .contact-grid, .cform .row2 { grid-template-columns: 1fr; }
  .intro-grid .side { position: static; padding: clamp(28px,6vw,44px) var(--pad) clamp(40px,8vw,60px); }
  .intro-photo { min-height: 300px; }
  .cards-3, .team, .reviews, .news, .modes, .stats { grid-template-columns: 1fr 1fr; }
  .review { border-top: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .hero-cards { grid-template-columns: 1fr; }
  .hero-cards .icard { border-left: 0; border-top: 1px solid var(--line); }
  .hero-cards .icard:first-child { border-top: 0; }
  .hero-cards-wrap { margin-top: -30px; background: linear-gradient(to bottom, transparent 0, transparent 30px, var(--paper-2) 30px); }
}
@media (max-width: 760px) {
  .hero-arrow { display: none; }
}
@media (max-width: 620px) {
  .cards-3, .team, .reviews, .news, .modes, .stats, .footer-grid { grid-template-columns: 1fr; }
  .stats-over { grid-template-columns: 1fr 1fr; }
  .stats-over .stat { padding: 6px 12px; }
  .stats-over .stat .n { font-size: 26px; }
  .stats-over .stat:nth-child(3) { border-left: 0; }
  .imgband-stats { padding: clamp(44px,12vw,70px) 0 20px; }
  .rg-row { grid-template-columns: 50px 1fr; }
  .rg-row .desc, .rg-row .go { display: none; }
  .hero p { font-size: 15px; }
  .mnav { width: 84%; min-width: 0; max-width: none; }
}

/* ============ SEO/GEO-Erweiterungen Startseite (2026-07-22) ============ */
/* Ablauf-Steps: 4 statt 5 Spalten + Icons im Kreis */
.steps { list-style: none; }
.steps.steps-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .steps.steps-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps.steps-4 { grid-template-columns: 1fr; } }
.step .s-num svg { width: 24px; height: 24px; stroke: var(--navy); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Rechtsberatung-Trio (Fließtext in drei Spalten) */
.txt-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 56px); max-width: 1080px; margin: 0 auto; }
.txt-block h3 { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .08em; font-size: 16px; color: var(--ink); margin-bottom: 14px; line-height: 1.45; }
.txt-block p { font-size: 15px; line-height: 1.9; color: var(--grey); }
@media (max-width: 820px) { .txt-cols { grid-template-columns: 1fr; gap: 34px; max-width: 560px; } }

/* Vertrauens-Kennzahlen (bordered grid wie Reviews) */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: clamp(30px, 3vw, 46px) 22px; text-align: center; border-left: 1px solid var(--line); }
.trust-item:first-child { border-left: 0; }
.trust-item .tn { font-family: var(--f-head); font-weight: 300; font-size: clamp(26px, 3vw, 40px); color: var(--navy); letter-spacing: .02em; line-height: 1; }
.trust-item .tl { font-size: 13px; line-height: 1.7; color: var(--grey); margin: 14px auto 0; max-width: 22ch; }
@media (max-width: 720px) { .trust-grid { grid-template-columns: 1fr 1fr; row-gap: 34px; } .trust-item:nth-child(odd) { border-left: 0; } }

/* Textlinks in Fließtext-Bereichen */
.rich a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(41,60,116,.35); transition: text-decoration-color .3s var(--ease); }
.rich a:hover { text-decoration-color: var(--navy); }
.faq-a a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* Beratung: links Accordion-Text, rechts Foto (2026-07-22) */
.beratung-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.beratung-photo { position: relative; min-height: clamp(400px, 44vw, 600px); overflow: hidden; align-self: stretch; }
.beratung-photo > div { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.1s var(--ease); }
.beratung-photo:hover > div { transform: scale(1.05); }
.beratung-photo::after { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(255,255,255,.6); pointer-events: none; z-index: 1; }
.acc-list { margin-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); max-width: 560px; }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-q { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; display: flex; justify-content: space-between; gap: 22px; align-items: center; padding: 26px 4px; font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; line-height: 1.45; color: var(--ink); transition: color .4s var(--ease); }
.acc-q:hover { color: var(--navy); }
.acc-q .pm { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.acc-q .pm::before, .acc-q .pm::after { content: ""; position: absolute; background: var(--navy); transition: transform .4s var(--ease); }
.acc-q .pm::before { top: 50%; left: 0; width: 16px; height: 1.5px; transform: translateY(-50%); }
.acc-q .pm::after { left: 50%; top: 0; width: 1.5px; height: 16px; transform: translateX(-50%); }
.acc-item.open .pm::after { transform: translateX(-50%) scaleY(0); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.acc-a p { padding: 0 26px 26px 4px; font-size: 14.5px; line-height: 1.9; color: var(--grey); }
@media (max-width: 860px) {
  .beratung-grid { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 48px); }
  .beratung-photo { min-height: 320px; order: -1; }
  .acc-list { max-width: none; }
}

/* Plus/Minus-Icon animiert beim Hovern (Beratung + FAQ) */
.acc-q .pm, .faq-q .pm { transition: transform .45s var(--ease); }
.acc-q:hover .pm, .faq-q:hover .pm { transform: rotate(180deg) scale(1.12); }

/* Mandantenstimmen als Slider (immer 3 sichtbar, Desktop) */
.rev-slider { overflow: hidden; border: 1px solid rgba(255,255,255,.22); }
.rev-track { display: flex; transition: transform .6s var(--ease); }
.rev-track .review { flex: 0 0 33.3333%; border-left: 1px solid rgba(255,255,255,.22); }
.rev-track .review:first-child { border-left: 0; }
.rev-nav { display: flex; justify-content: center; gap: 14px; margin-top: clamp(34px, 4vw, 52px); }
.rev-arrow { border: 0; background: transparent; color: rgba(255,255,255,.6); cursor: pointer; padding: 6px; display: grid; place-items: center; transition: color .4s var(--ease), transform .4s var(--ease); }
.rev-arrow:hover { color: #fff; }
.rev-arrow svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .rev-track .review { flex-basis: 50%; } }
@media (max-width: 620px) { .rev-track .review { flex-basis: 100%; } }

/* Team-Karussell (Homepage) — heller Hintergrund, dunkle Pfeile */
.team-slider { overflow: hidden; }
.team-track { display: flex; transition: transform .6s var(--ease); }
.team-track .member { flex: 0 0 33.3333%; box-sizing: border-box; padding: 0 clamp(14px, 1.6vw, 20px); }
.team-carousel { position: relative; }
.team-arrow { position: absolute; top: 38%; transform: translateY(-50%); z-index: 5; border: 0; background: transparent; color: var(--grey); cursor: pointer; padding: 8px; display: grid; place-items: center; transition: color .3s var(--ease), transform .3s var(--ease); }
.team-prev { left: calc(-0.7 * var(--pad)); }
.team-next { right: calc(-0.7 * var(--pad)); }
.team-arrow:hover { color: var(--navy); }
.team-arrow svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .team-track .member { flex-basis: 50%; } }
@media (max-width: 620px) { .team-track .member { flex-basis: 100%; } }
/* Lokale Kanzlei-Fotos zeigen die Person weiter entfernt — leicht heranzoomen, damit alle Köpfe gleich groß wirken */
/* Klickbare Team-Karte (Startseite): Klick öffnet Lightbox statt Flip */
.member[data-lb] { cursor: pointer; }
.member[data-lb]:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.member .ph > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.3s var(--ease); }
.member[data-lb]:hover .ph > img { transform: scale(1.045); }
/* ===== Porträts: Personen überall gleich groß abbilden =====
   Die Originalfotos sind aus unterschiedlicher Distanz aufgenommen. --pz gleicht die
   Kopfgröße an, --pty die Höhenlage. Gilt für Startseiten-Karussell, Anwälte-Seite und Lightbox. */
.member[data-lb="offenhausen"], #offenhausen, #bio-offenhausen { --pz: 1;    --pty: 0%; }
.member[data-lb="raedecke"],    #raedecke,    #bio-raedecke    { --pz: 1.2;  --pty: -2%; }
.member[data-lb="frankfurter"], #frankfurter, #bio-frankfurter { --pz: 1.2;  --pty: 0%; }
.member[data-lb="kirci"],       #kirci,       #bio-kirci       { --pz: 1.35; --pty: -2%; }
.member[data-lb="ewert"],       #ewert,       #bio-ewert       { --pz: 1.17; --pty: 0%; }
.member .ph > img { transform: scale(var(--pz, 1)) translateY(var(--pty, 0)); transform-origin: center 18%; }
.member[data-lb]:hover .ph > img { transform: scale(calc(var(--pz, 1) * 1.04)) translateY(var(--pty, 0)); }
.member[data-lb]:hover h3 { color: var(--navy); }
.member .m-view { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-family: var(--f-head); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-2); transition: color .4s var(--ease), gap .4s var(--ease); }
.member .m-view::after { content: ""; width: 20px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.member[data-lb]:hover .m-view { color: var(--navy); gap: 13px; }
.member[data-lb]:hover .m-view::after { width: 30px; }

/* Monogramm-Platzhalter (Anwälte ohne Foto) — dezent im Kanzlei-Stil, Foto später eintauschbar */
.ph-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #1c2333 0%, #0a0a0a 100%); }
.ph-mono span { font-family: var(--f-head); font-weight: 300; font-size: clamp(46px, 6vw, 76px); letter-spacing: .16em; text-indent: .16em; color: rgba(255,255,255,.9); }
.profile-photo .ph-mono { position: absolute; }

/* Anwalts-Profile (Anwälte-Seite) — full-bleed, Bild bis zum Bildschirmrand, alternierend */
.profiles { display: flex; flex-direction: column; }
.profile { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.profile:nth-child(even) .profile-photo { order: 2; }
.profile-photo { position: relative; overflow: hidden; background: var(--paper-2); min-height: clamp(420px, 44vw, 640px); }
.profile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-photo .ph-mono { position: absolute; inset: 0; }
.profile-photo img { transition: transform 1s var(--ease); transform: scale(var(--pz, 1)) translateY(var(--pty, 0)); transform-origin: center 18%; }
.profile:hover .profile-photo img { transform: scale(calc(var(--pz, 1) * 1.05)) translateY(var(--pty, 0)); }
.skills { margin-top: clamp(30px, 3.2vw, 44px); display: flex; flex-direction: column; gap: 20px; }
.skill-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); }
.skill-head span:last-child { color: var(--navy); letter-spacing: .08em; }
.skill-bar { height: 2px; background: var(--line); position: relative; overflow: hidden; }
.skill-bar i { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--navy); width: 0; transition: width 1.4s var(--ease); }
.skills.in .skill-bar i { width: var(--pct); }
.profile-photo::after {
  content: ""; position: absolute; inset: 26px; z-index: 2; pointer-events: none;
  padding: 1px;
  background: conic-gradient(from -90deg, rgba(255,255,255,.6) var(--frame-a), transparent 0deg) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  --frame-a: 0deg;
}
.profile.in .profile-photo::after { animation: frameDraw 1.25s var(--ease) forwards; }
.profile-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 5.5vw, 100px); background: var(--paper-2); }
.profile-body h2 { font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 14px; }
.profile-role { font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); line-height: 1.9; }
.profile-body .dotsep { margin: 22px 0; }
.profile-body p { color: var(--grey); line-height: 1.9; }
.profile-body p + p { margin-top: 18px; }
.profile-btn { margin-top: clamp(26px, 3vw, 36px); }
/* Direkte E-Mail-Adresse im Anwaltsprofil (Seite „Anwälte" und Profil-Overlay der Startseite) */
.profile-mail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: clamp(22px, 2.4vw, 30px); }
.profile-mail .pm-label { font-family: var(--f-head); font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-2); }
.profile-mail a { font-size: 14px; letter-spacing: .02em; color: var(--navy); border-bottom: 1px solid rgba(41,60,116,.3); padding-bottom: 2px; transition: border-color .35s var(--ease); }
.profile-mail a:hover { border-bottom-color: var(--navy); }
.lb-text .profile-mail { margin-top: 24px; }
@media (max-width: 640px) { .lb-text .profile-mail { justify-content: center; } }
@media (max-width: 860px) {
  .profile { grid-template-columns: 1fr; }
  .profile:nth-child(even) .profile-photo { order: 0; }
  .profile-photo { min-height: 340px; }
  .profile-body { padding: clamp(34px, 7vw, 56px) var(--pad); }
}

/* Footer-Kontaktadresse nicht kursiv */
.footer .fcontact { font-style: normal; }

/* Vertrauen: Text in zwei Spalten */
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 64px); max-width: 1040px; margin: 0 auto; }
.two-cols .lead { max-width: none; }
@media (max-width: 780px) { .two-cols { grid-template-columns: 1fr; gap: 20px; max-width: 560px; } }

/* Mandantenstimmen-Kacheln in weiß (auf navy Sektion) */
.rg-block .rev-slider { border: 1px solid rgba(255,255,255,.4); }
.rg-block .rev-track .review { background: transparent; border-left: 1px solid rgba(255,255,255,.4); display: flex; flex-direction: column; }
.rg-block .rev-track .review:first-child { border-left: 0; }
.rg-block .rev-track .review .stars { color: #f0b429; }
.rg-block .rev-track .review p { color: #fff; }
.rg-block .rev-track .review .who { color: rgba(255,255,255,.65); margin-top: auto; }
.rg-block .rev-track .review:first-child { border-left: 0; }
.rg-block .rev-track .review p { color: #fff; }
.rg-block .rev-track .review .who { color: rgba(255,255,255,.65); }
.rg-block .rev-track .review .stars { color: #f0b429; }

/* ============================================================
   Anwälte-Seite (2026-07-23) — GEO/SEO-Ausbau, Wirtschaftsrecht
   Nutzt Systemvariablen, --ease, Reveal (.rv/.in), Counter
   ============================================================ */

/* Hero-Erweiterung: Subline, Lead & CTA über dem Headerbild */
/* Kopfbild füllt immer eine Bildschirmhöhe (06.08.2026) — auch bei den schlanken
   Köpfen (FAQ, Downloads, Impressum …), damit es bis zum unteren Rand reicht. */
.page-head.img.hero-lg { min-height: 100svh; display: flex; align-items: center; padding: clamp(210px, 24vw, 290px) 0 clamp(96px, 11vw, 132px); }
.page-head.img.hero-lg > .wrap { width: 100%; }
.ph-sub { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.94); font-size: clamp(15px, 1.9vw, 24px); line-height: 1.4; margin-top: 18px; }
.page-head.img .ph-lead { color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.9; max-width: 58ch; margin-top: 26px; }
.page-head.img .ph-cta { margin-top: 42px; display: flex; gap: 16px; flex-wrap: wrap; }

/* Kopftext ohne Scrollen lesbar (2026-08-06)
   Der Hero füllt genau eine Bildschirmhöhe; Schriftgrößen und Abstände
   hängen zusätzlich an der Fensterhöhe (vh), damit Claim, Lead, Button und
   Brotkrumen auch auf flachen Fenstern noch im Bild stehen statt darunter.
   Nur Heroes mit vollem Textblock (erkennbar am CTA) werden gestreckt —
   die schlanken Köpfe (Impressum, FAQ …) behalten ihre Höhe. */
.page-head.img.hero-lg:has(.ph-cta, .ph-lead) { min-height: 100svh; display: flex; align-items: center; padding: clamp(140px, 19vh, 250px) 0 clamp(56px, 8vh, 120px); }
.page-head.img.hero-lg:has(.ph-cta, .ph-lead) > .wrap { width: 100%; }
.hero-lg:has(.ph-cta, .ph-lead) .h1 { font-size: clamp(26px, min(3.6vw, 5vh), 44px); margin-top: clamp(10px, 2vh, 20px); }
.hero-lg:has(.ph-cta, .ph-lead) .lg-claim { font-size: clamp(17px, min(2.1vw, 3vh), 31px); margin-top: clamp(12px, 2vh, 26px); }
.hero-lg:has(.ph-cta, .ph-lead) .ph-sub { font-size: clamp(15px, min(1.9vw, 2.6vh), 24px); margin-top: clamp(12px, 2vh, 18px); }
.hero-lg:has(.ph-cta, .ph-lead) .ph-lead { font-size: clamp(14px, min(1.25vw, 2vh), 16px); line-height: 1.75; margin-top: clamp(12px, 2vh, 26px); }
.hero-lg:has(.ph-cta, .ph-lead) .ph-cta { margin-top: clamp(18px, 3.2vh, 42px); }
.hero-lg:has(.ph-cta, .ph-lead) .breadcrumb { margin-top: clamp(14px, 2.6vh, 26px); }
@media (max-height: 760px) {
  .page-head.img.hero-lg:has(.ph-cta, .ph-lead) { padding-top: clamp(118px, 17vh, 160px); }
  .hero-lg:has(.ph-cta, .ph-lead) .ph-lead { line-height: 1.6; }
}

/* Anker unter dem fixierten Header auffangen */
:target { scroll-margin-top: 110px; }
[id] { scroll-margin-top: 100px; }

/* ---------- Sektion 2: Team-Karten (gleich groß, Hover-Lift) ---------- */
.team-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2vw, 30px); }
.tcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tcard:hover { transform: translateY(-8px); box-shadow: 0 20px 44px rgba(10,10,10,.13); }
.tcard-photo { position: relative; aspect-ratio: 3/3.5; overflow: hidden; background: var(--paper-2); }
.tcard-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tcard:hover .tcard-photo img { transform: scale(1.06); }
.tcard-photo .ph-mono { position: absolute; inset: 0; }
.tcard-photo .ph-mono span { font-size: clamp(40px, 4vw, 58px); }
.tcard-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); z-index: 3; }
.tcard:hover .tcard-photo::after { transform: scaleX(1); }
.tcard-body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2vw, 30px); }
.tcard h3 { font-size: 17px; letter-spacing: .08em; margin-bottom: 10px; }
.tcard .role { font-family: var(--f-head); font-weight: 600; font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--navy); line-height: 1.7; margin-bottom: 16px; }
.tcard .focus { font-size: 12.5px; line-height: 1.7; color: var(--grey-2); margin-bottom: 14px; }
.tcard p { font-size: 13.5px; line-height: 1.85; margin-bottom: 22px; }
.tcard .more { margin-top: auto; align-self: flex-start; }
@media (max-width: 1000px) { .team-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .team-cards { grid-template-columns: 1fr; } }

/* Anwälte im Dessau-Stil: kleines Icon + Name + Titel + Text, sauberes Grid, keine Bilder */
.lawyers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 5.5vw, 88px) clamp(48px, 6vw, 104px); }
.lawyer-head { display: flex; align-items: flex-start; gap: clamp(16px, 1.6vw, 22px); margin-bottom: clamp(18px, 2vw, 26px); }
.lawyer-ic { width: 46px; height: 46px; flex-shrink: 0; color: var(--navy); }
.lawyer-ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.lawyer h3 { font-size: clamp(19px, 2vw, 25px); letter-spacing: .05em; margin-bottom: 12px; line-height: 1.32; }
.lawyer-role { font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); line-height: 1.8; }
.lawyer-body p { font-size: 14.5px; line-height: 1.95; color: var(--grey); max-width: 54ch; }
.lawyer-body p + p { margin-top: 16px; }
@media (max-width: 820px) { .lawyers { grid-template-columns: 1fr; gap: clamp(44px, 9vw, 60px); } }

/* ---------- Sektion 3: Leistungskarten (versetzt, unterschiedlich hoch) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.2vw, 32px); align-items: stretch; }
.svc-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); padding: clamp(30px, 3vw, 46px); transition: transform .6s var(--ease), opacity .6s var(--ease), box-shadow .5s var(--ease), background .4s var(--ease); }
.svc-card.rv-1 { transition-delay: .09s; }
.svc-card.rv-2 { transition-delay: .18s; }
.svc-card.rv-3 { transition-delay: .27s; }
.svc-card.rv-4 { transition-delay: .36s; }
.svc-card.rv-5 { transition-delay: .45s; }
.svc-card:hover { transition-delay: 0s; }
.svc-card:hover { transform: translateY(-7px); box-shadow: 0 18px 40px rgba(10,10,10,.11); background: #faf9f7; }
.svc-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.svc-card:hover::after { transform: scaleX(1); }
.svc-card .ico { display: block; width: clamp(40px, 4.4vw, 48px); height: clamp(40px, 4.4vw, 48px); color: var(--navy); margin-bottom: 24px; }
.svc-card .ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.svc-card .num { display: block; font-family: var(--f-head); font-weight: 300; font-size: clamp(28px, 3vw, 40px); letter-spacing: .08em; color: var(--navy); margin-bottom: 22px; }
.svc-card h3 { font-size: 19px; letter-spacing: .09em; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); line-height: 1.4; }
.svc-card p { font-size: 14px; line-height: 1.9; margin-bottom: 24px; }
.svc-card .more { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- Sektion 4: Warum corelaw (große Zahlen statt Icons) ---------- */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.why-item { position: relative; overflow: hidden; padding: clamp(30px, 3.6vw, 50px) clamp(26px, 3vw, 46px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .5s var(--ease); }
.why-item:hover { background: var(--paper-2); }
.why-item .wn { display: inline-block; font-family: var(--f-head); font-weight: 300; font-size: clamp(28px, 3vw, 46px); line-height: 1; letter-spacing: .04em; color: var(--grey-2); opacity: .5; transition: color .55s var(--ease), opacity .55s var(--ease); }
.why-item:hover .wn { color: var(--navy); opacity: 1; }
.why-item h3 { font-size: clamp(17px, 1.8vw, 22px); letter-spacing: .1em; margin: 16px 0 14px; }
.why-item p { font-size: 14.5px; line-height: 1.9; max-width: 46ch; }
@media (max-width: 720px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- Sektion 5: Timeline (horizontal, wachsende Linie) ---------- */
/* Ablauf: Kopf links (linksbündig) + Schritte rechts als Akkordeon */
.ablauf-split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.ablauf-head { text-align: left; }
.ablauf-head .lead { max-width: 50ch; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.acc-step { border-bottom: 1px solid var(--line); }
.acc-step:first-child { border-top: 1px solid var(--line); }
.acc-step-q { width: 100%; background: none; border: 0; cursor: pointer; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); padding: clamp(22px, 2.6vw, 30px) 0; font: inherit; text-align: left; color: var(--ink); }
.acc-num { font-family: var(--f-head); font-weight: 300; font-size: clamp(20px, 2vw, 26px); letter-spacing: .05em; color: var(--grey-2); transition: color .45s var(--ease); }
.acc-title { flex: 1; font-family: var(--f-head); font-weight: 300; font-size: 19px; letter-spacing: .09em; text-transform: uppercase; line-height: 1.4; transition: color .45s var(--ease); }
.acc-step-q:hover .acc-title, .acc-step.open .acc-title, .acc-step.open .acc-num { color: var(--navy); }
.acc-ic { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.acc-ic::before, .acc-ic::after { content: ""; position: absolute; background: var(--navy); transition: transform .4s var(--ease), opacity .4s var(--ease); }
.acc-ic::before { top: 6.25px; left: 0; width: 14px; height: 1.5px; }
.acc-ic::after { left: 6.25px; top: 0; width: 1.5px; height: 14px; }
.acc-step.open .acc-ic::after { transform: scaleY(0); opacity: 0; }
.acc-step-a { overflow: hidden; max-height: 0; transition: max-height .55s var(--ease); }
.acc-step-a p { font-size: 14px; line-height: 1.95; color: var(--grey); max-width: 58ch; padding: 0 0 clamp(24px, 2.6vw, 32px) clamp(38px, 4vw, 60px); }
@media (max-width: 860px) {
  .ablauf-split { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 44px); }
  .acc-step-a p { padding-left: clamp(30px, 9vw, 44px); }
}

/* ---------- Sektion 6: Zahlen als schräges Navy-Band (Architektur-Look) ---------- */
.stat-band { position: relative; background: var(--navy); padding: clamp(80px, 9vw, 130px) 0; margin: 0; }
.stat-band .eyebrow { color: rgba(255,255,255,.9); }
.stat-band h2 { color: #fff; }
.stat-band .trust-grid { border-top: 0; }
.stat-band .trust-item { border-left-color: rgba(255,255,255,.22); }
.stat-band .trust-item .tn { color: #fff; }
.stat-band .trust-item .tl { color: rgba(255,255,255,.72); }
@media (max-width: 720px) { .stat-band .trust-item:nth-child(odd) { border-left: 0; } }

/* ---------- Sektion 8: Vertrauen als Wortwolke (Slug/Tag Cloud, ganze Breite) ---------- */
.cloud { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: clamp(12px,1.6vw,26px) clamp(22px,3.2vw,56px); margin: clamp(24px,4vw,60px) auto 0; text-align: center; }
.cloud span { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .05em; line-height: 1.05; color: var(--grey-2); transition: color .4s var(--ease); cursor: default; }
.cloud span:hover { color: var(--navy); }
.cloud .s-xl { font-size: clamp(34px,6vw,78px); color: var(--ink); }
.cloud .s-l  { font-size: clamp(24px,4vw,52px); color: var(--navy); }
.cloud .s-m  { font-size: clamp(18px,2.6vw,34px); color: var(--ink); }
.cloud .s-s  { font-size: clamp(14px,1.7vw,22px); color: var(--grey); }
.cloud .s-xs { font-size: clamp(12px,1.2vw,16px); color: var(--grey-2); }

/* ---------- Menü: Instagram / Social ---------- */
.mnav-social { position: absolute; left: 0; right: 0; bottom: clamp(28px, 4vh, 46px); display: flex; align-items: center; padding: 0 clamp(36px, 3.5vw, 52px); }
.mnav-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.32); color: rgba(255,255,255,.82); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.mnav-social a:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.6); }
.mnav-social svg { width: 20px; height: 20px; }

/* ============================================================
   Anwälte-Seite — Premium-Redesign (2026-07-23)
   Editorial, ruhig, nur corelaw-Farben, keine Verläufe
   ============================================================ */

/* --- Anwälte: großzügige Karten, identische Portraits, Detail per Klick --- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 2.6vw, 46px); }
.mcard { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.mcard-photo { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--paper-2); margin-bottom: clamp(20px, 2vw, 28px); }
.mcard-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.mcard:hover .mcard-photo img { transform: scale(1.045); }
.mcard-ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper-2); }
.mcard-ph span { font-family: var(--f-head); font-weight: 300; font-size: clamp(30px, 3.6vw, 50px); letter-spacing: .18em; text-indent: .18em; color: var(--navy); opacity: .85; }
.mcard-photo::after { content: ""; position: absolute; inset: 0; border: 1px solid transparent; pointer-events: none; transition: border-color .6s var(--ease); }
.mcard:hover .mcard-photo::after { border-color: rgba(41,60,116,.28); }
.mcard h3 { font-size: clamp(16px, 1.5vw, 19px); letter-spacing: .05em; margin-bottom: 9px; transition: color .4s var(--ease); }
.mcard:hover h3 { color: var(--navy); }
.mcard .m-role { font-family: var(--f-head); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); line-height: 1.65; }
.mcard .m-view { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; font-family: var(--f-head); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey-2); transition: color .4s var(--ease), gap .4s var(--ease); }
.mcard .m-view::after { content: ""; width: 20px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.mcard:hover .m-view { color: var(--navy); gap: 13px; }
.mcard:hover .m-view::after { width: 30px; }
@media (max-width: 940px) { .team-grid { grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,44px); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; } }

/* Lightbox / Profil-Overlay (Detail erst nach Klick) */
.lb { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 5vw, 64px); opacity: 0; visibility: hidden; transition: opacity .55s var(--ease), visibility .55s; }
.lb.open { opacity: 1; visibility: visible; }
.lb-back { position: absolute; inset: 0; background: rgba(10,10,10,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lb-panel { position: relative; z-index: 2; background: #fff; width: 100%; max-width: 880px; max-height: 86vh; overflow: hidden; padding: 0; transform: translateY(24px); transition: transform .6s var(--ease); }
/* Lightbox mit Porträt: Bild links volle Höhe (1/3 Breite), Bio rechts */
.lb-content { display: flex; gap: 0; align-items: stretch; }
.lb-figure { flex: 0 0 41.5%; margin: 0; overflow: hidden; background: var(--paper-2); position: relative; min-height: 100%; }
.lb-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(var(--pz, 1)) translateY(var(--pty, 0)); transform-origin: center 18%; }
.lb-figure .ph-mono { position: absolute; inset: 0; }
.lb-figure::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.55); pointer-events: none; z-index: 2; }
.lb-text { flex: 1 1 auto; min-width: 0; padding: clamp(38px, 5vw, 72px) clamp(30px, 4vw, 64px); max-height: 86vh; overflow-y: auto; }
@media (max-width: 640px) { .lb-content { flex-direction: column; align-items: stretch; text-align: center; } .lb-figure { flex-basis: auto; width: 100%; min-height: 0; aspect-ratio: 16/10; } .lb-figure img { position: absolute; } .lb-text { max-height: none; } .lb-text .dotsep.left { margin-left: auto; margin-right: auto; } }
.lb.open .lb-panel { transform: none; }
.lb-close { position: absolute; top: 22px; right: 26px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--grey); cursor: pointer; transition: color .3s var(--ease), transform .45s var(--ease); }
.lb-close:hover { color: var(--navy); transform: rotate(90deg); }
.lb-panel h3 { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: .05em; margin-bottom: 16px; }
.lb-role { font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); line-height: 1.85; }
.lb-panel .dotsep { margin: 24px 0; }
.lb-panel p { font-size: 15px; line-height: 1.95; color: var(--grey); }
.lb-panel p + p { margin-top: 16px; }

/* --- Leistungen: editoriale Index-Liste statt Kacheln --- */
.svc-index { border-top: 1px solid var(--line); }
.svc-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: clamp(20px, 3vw, 54px); align-items: center; padding: clamp(28px, 3.4vw, 48px) 0; border-bottom: 1px solid var(--line); transition: padding-left .55s var(--ease), background .4s var(--ease); }
.svc-row .num { font-family: var(--f-head); font-weight: 300; font-size: clamp(14px, 1.4vw, 17px); letter-spacing: .12em; color: var(--grey-2); transition: color .4s var(--ease); }
.svc-row h3 { font-size: clamp(21px, 2.7vw, 36px); letter-spacing: .03em; margin-bottom: 10px; transition: color .45s var(--ease); }
.svc-row .desc { font-size: 14px; line-height: 1.85; color: var(--grey-2); max-width: 62ch; }
.svc-row .go { font-family: var(--f-head); font-weight: 600; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); white-space: nowrap; opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.svc-row:hover { padding-left: clamp(12px, 1.8vw, 28px); }
.svc-row:hover .num { color: var(--navy); }
.svc-row:hover h3 { color: var(--navy); }
.svc-row:hover .go { opacity: 1; transform: none; }
@media (max-width: 680px) { .svc-row { grid-template-columns: auto 1fr; } .svc-row .desc { display: none; } .svc-row .go { display: none; } }

/* --- Vertrauen: Bild + Typografie + feine Werteliste (keine Icons) --- */
.trust-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.trust-visual { position: relative; overflow: hidden; min-height: clamp(420px, 46vw, 640px); }
.trust-visual > div { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.4s var(--ease); }
.trust-split:hover .trust-visual > div { transform: scale(1.04); }
.trust-visual::after { content: ""; position: absolute; inset: 26px; border: 1px solid rgba(255,255,255,.55); pointer-events: none; z-index: 2; }
.trust-text { background: var(--navy); display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 5.5vw, 100px); }
.trust-text .eyebrow { color: rgba(255,255,255,.85); }
.trust-text h2 { color: #fff; }
.trust-text .lead { margin-top: 24px; color: rgba(255,255,255,.82); }
.trust-list { list-style: none; margin-top: clamp(30px, 3.6vw, 44px); border-top: 1px solid rgba(255,255,255,.22); }
.trust-list li { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .09em; font-size: clamp(14px, 1.5vw, 17px); color: rgba(255,255,255,.92); padding: clamp(15px, 1.6vw, 19px) 0; border-bottom: 1px solid rgba(255,255,255,.22); transition: padding-left .45s var(--ease), color .45s var(--ease); }
.trust-list li:hover { padding-left: 14px; color: #fff; }
@media (max-width: 860px) { .trust-split { grid-template-columns: 1fr; } .trust-visual { order: -1; min-height: 300px; } .trust-text { padding: clamp(40px,8vw,64px) var(--pad); } }

.lb-data { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   KONTAKT — Creative Direction (v148)
   Bild-Hero · überlappender Direktkontakt · Formular-Panel · Karten-Band
   ============================================================ */

/* Direktkontakt-Streifen, überlappt den dunklen Hero */
.k-quick-wrap { position: relative; z-index: 5; margin-top: clamp(-92px, -7vw, -64px); }
.k-quick { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid var(--line); box-shadow: 0 26px 60px rgba(10,10,10,.16); }
.k-quick a { position: relative; display: flex; flex-direction: column; gap: 15px; padding: clamp(28px, 3vw, 46px); border-right: 1px solid var(--line); transition: background .45s var(--ease); }
.k-quick a:last-child { border-right: 0; }
.k-quick a:hover { background: var(--paper-2); }
.k-quick a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.k-quick a:hover::after { transform: scaleX(1); }
.k-quick .ic { width: 34px; height: 34px; color: var(--navy); }
.k-quick .ic svg { width:100%; height:100%; stroke: currentColor; fill:none; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.k-quick .kq-label { font-family: var(--f-head); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color: var(--grey-2); }
.k-quick .kq-val { font-family: var(--f-head); font-weight:300; font-size: clamp(18px, 1.7vw, 22px); letter-spacing:.02em; color: var(--ink); line-height:1.3; }
.k-quick .kq-more { margin-top: 4px; font-family: var(--f-head); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--grey-2); display:inline-flex; align-items:center; gap:10px; transition: color .4s var(--ease), gap .4s var(--ease); }
.k-quick .kq-more::after { content:""; width:22px; height:1px; background: currentColor; transition: width .4s var(--ease); }
.k-quick a:hover .kq-more { color: var(--navy); gap:14px; }
.k-quick a:hover .kq-more::after { width:34px; }
@media (max-width: 780px) {
  .k-quick-wrap { margin-top: clamp(-64px, -11vw, -48px); }
  .k-quick { grid-template-columns: 1fr; }
  .k-quick a { border-right:0; border-bottom:1px solid var(--line); display:grid; grid-template-columns: auto 1fr; column-gap: 22px; row-gap: 4px; align-items:center; padding: 24px clamp(24px,6vw,30px); }
  .k-quick a:last-child { border-bottom:0; }
  .k-quick .ic { grid-row: 1 / span 2; flex-shrink:0; }
  .k-quick .kq-more { display:none; }
}

/* Formular + Kanzlei-Split */
.k-split { display:grid; grid-template-columns: 1.12fr .88fr; gap: clamp(36px, 4.6vw, 76px); align-items: start; }
.k-split .k-head { margin-bottom: clamp(26px, 3vw, 38px); }
.k-split .k-head h2 { margin-top: 18px; }
@media (max-width: 900px) { .k-split { grid-template-columns: 1fr; gap: clamp(44px,7vw,60px); } }

/* Formular-Panel */
.k-form-card { background: transparent; border:0; padding:0; box-shadow:none; }

/* ============================================================
   BLOG — Featured-Post + Filter (v152)
   ============================================================ */
.blog-feat { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,3.8vw,60px); align-items:center; margin-bottom:clamp(48px,6vw,80px); }
.blog-feat .feat-img { position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--paper-2); }
.blog-feat .feat-img > div { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1.1s var(--ease); }
.blog-feat:hover .feat-img > div { transform:scale(1.05); }
.blog-feat .feat-img::after { content:""; position:absolute; inset:22px; border:1px solid rgba(255,255,255,.55); pointer-events:none; }
.blog-feat .feat-flag { display:inline-block; font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-2); margin-bottom:18px; }
.blog-feat .cat { font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--navy); }
.blog-feat h2 { font-size:clamp(23px,2.7vw,36px); letter-spacing:.02em; line-height:1.28; margin:14px 0 18px; }
.blog-feat p { color:var(--grey); line-height:1.9; margin-bottom:26px; max-width:54ch; }
.blog-feat .date { font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2); margin-top:22px; }
@media (max-width:820px){ .blog-feat { grid-template-columns:1fr; } }
.blog-empty { padding:44px 6px; color:var(--grey-2); font-size:15px; }
.cform select { width:100%; border:0; border-bottom:1px solid var(--line); padding:10px 26px 10px 0; font-family:var(--f-body); font-size:15px; color:var(--ink); background:transparent; outline:none; cursor:pointer; transition:border-color .4s; -webkit-appearance:none; appearance:none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23293c74' stroke-width='1.4'><path d='M1 1.5 6 6.5 11 1.5'/></svg>"); background-repeat:no-repeat; background-position: right 1px center; background-size: 12px; }
.cform select:focus { border-color: var(--navy); }
.cform .full { grid-column: 1 / -1; }
.k-check { display:flex; gap:14px; align-items:flex-start; }
.k-check input { -webkit-appearance:none; appearance:none; width:20px; height:20px; border:1px solid var(--grey-2); flex-shrink:0; margin-top:2px; cursor:pointer; position:relative; transition:border-color .3s, background .3s; }
.k-check input:checked { background: var(--navy); border-color: var(--navy); }
.k-check input:checked::after { content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.k-check input:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.k-check label { font-size:12.5px; line-height:1.7; color: var(--grey); letter-spacing:.02em; margin:0; text-transform:none; font-family: var(--f-body); font-weight:400; }
.k-check a { color: var(--navy); text-decoration:underline; text-underline-offset:2px; }
.k-form-foot { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top: 4px; }
.k-form-foot .note { font-size:12px; color: var(--grey-2); letter-spacing:.02em; max-width: 30ch; }

/* Kanzlei-Aside */
.k-aside dl { border-top: 1px solid var(--line); margin-top: 30px; }
.k-aside .item { padding: 22px 0; border-bottom: 1px solid var(--line); display:grid; grid-template-columns: 26px 1fr; gap: 20px; align-items:start; }
.k-aside .item .ic { width:22px; height:22px; color: var(--navy); margin-top:3px; }
.k-aside .item .ic svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.k-aside dt { font-family: var(--f-head); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color: var(--grey-2); margin-bottom:6px; }
.k-aside dd { font-size:15.5px; color: var(--ink); line-height:1.7; }
.k-aside dd a:hover { color: var(--navy); }
.k-aside .k-note { margin-top: 30px; padding: 24px 26px; background: var(--paper-2); border-left: 2px solid var(--navy); font-size:14px; line-height:1.8; color: var(--grey); }

/* Graustufen-Karten-Band mit Info-Karte */
.k-map { position: relative; background: var(--paper-2); overflow: hidden; }
.k-map .k-map-frame { width:100%; height: clamp(420px, 48vw, 580px); border:0; display:block; filter: grayscale(1) contrast(1.06); transition: filter .7s var(--ease); }
.k-map:hover .k-map-frame { filter: grayscale(0) contrast(1.02); }
.k-map .wrap { position:absolute; inset:0; display:flex; align-items:center; pointer-events:none; }
.k-map-card { pointer-events:auto; width: min(400px, 84vw); background:#fff; padding: clamp(32px, 3vw, 46px); box-shadow: 0 30px 70px rgba(10,10,10,.22); }
.k-map-card .eyebrow { margin-bottom:16px; }
.k-map-card h3 { font-size: clamp(20px, 2.1vw, 26px); letter-spacing:.06em; margin-bottom:18px; }
.k-map-card address { font-style:normal; font-size:15px; line-height:1.85; color: var(--grey); }
.k-map-card address strong { color: var(--ink); font-weight:600; }
.k-map-card .arrowlink { margin-top: 26px; font-family: var(--f-head); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
@media (max-width: 860px) {
  .k-map { overflow: visible; }
  .k-map .k-map-frame { filter:none; height: clamp(300px, 60vw, 420px); }
  .k-map .wrap { position: static; display:block; }
  .k-map-card { width:auto; box-shadow:none; border:1px solid var(--line); border-top:0; }
}

/* ============================================================
   LANDINGPAGES FACHGEBIETE — Premium-Komponenten (v153)
   Magazin-Look · große Bildflächen · Abwechslung · GEO-Bausteine
   ============================================================ */

/* Trust-Bar (4 Icons) */
.lp-trust { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); }
.lp-trust .it { padding:clamp(28px,3vw,44px) clamp(22px,2.4vw,32px); border-right:1px solid var(--line); transition:background .45s var(--ease); }
.lp-trust .it:last-child { border-right:0; }
.lp-trust .it:hover { background:var(--paper-2); }
.lp-trust .ic { display:block; width:40px; height:40px; color:var(--navy); margin-bottom:20px; }
.lp-trust .ic svg { display:block; width:40px; height:40px; stroke:currentColor; fill:none; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.lp-trust h3 { font-size:15px; letter-spacing:.09em; margin-bottom:10px; }
.lp-trust p { font-size:13.5px; line-height:1.75; color:var(--grey); }
@media(max-width:820px){ .lp-trust{ grid-template-columns:1fr 1fr; } .lp-trust .it:nth-child(2){border-right:0;} .lp-trust .it:nth-child(1),.lp-trust .it:nth-child(2){border-bottom:1px solid var(--line);} }
@media(max-width:480px){ .lp-trust{ grid-template-columns:1fr; } .lp-trust .it{ border-right:0; border-bottom:1px solid var(--line);} .lp-trust .it:last-child{border-bottom:0;} }

/* Fullscreen-Bildband (dezente Parallax) */
.lp-band { position:relative; min-height:clamp(340px,52vh,560px); display:flex; align-items:center; background:#0a0a0a; overflow:hidden; }
.lp-band .bg { position:absolute; inset:0; background-size:cover; background-position:center; background-attachment:fixed; opacity:.5; }
@media(hover:none){ .lp-band .bg{ background-attachment:scroll; } }
.lp-band::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.25)); }
.lp-band .wrap { position:relative; z-index:2; }
.lp-band .eyebrow { color:rgba(255,255,255,.85); }
.lp-band-q { font-family:var(--f-head); font-weight:300; text-transform:none; font-size:clamp(22px,3vw,40px); line-height:1.35; color:#fff; max-width:20ch; margin-top:18px; letter-spacing:.01em; }
.lp-band-q b { font-weight:600; }

/* Bild/Text-Split, alternierend */
.lp-split { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.lp-split-img { position:relative; overflow:hidden; min-height:clamp(360px,42vw,600px); background:var(--paper-2); }
.lp-split-img > div { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1.3s var(--ease); }
.lp-split:hover .lp-split-img > div { transform:scale(1.05); }
.lp-split-img::after { content:""; position:absolute; inset:24px; border:1px solid rgba(255,255,255,.5); pointer-events:none; }
.lp-split-body { display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,5.5vw,96px); }
.lp-split.rev .lp-split-img { order:2; }
.lp-split-body h2 { font-size:clamp(24px,2.6vw,36px); margin:16px 0 20px; letter-spacing:.02em; }
.lp-split-body p { color:var(--grey); line-height:1.95; }
.lp-split-body p + p { margin-top:16px; }
.lp-split-body .btn { margin-top:32px; align-self:flex-start; }
.lp-split.dark { background:var(--navy); }
.lp-split.dark .lp-split-body .eyebrow { color:rgba(255,255,255,.85); }
.lp-split.dark .lp-split-body h2 { color:#fff; }
.lp-split.dark .lp-split-body p { color:rgba(255,255,255,.85); }
@media(max-width:860px){ .lp-split{ grid-template-columns:1fr; } .lp-split.rev .lp-split-img{ order:0; } .lp-split-img{ min-height:300px; } .lp-split-body{ padding:clamp(36px,7vw,56px) var(--pad); } }

/* Langtext / GEO-Fließtext */
.lp-rich { max-width:74ch; }
.lp-rich h2 { font-size:clamp(22px,2.4vw,30px); letter-spacing:.02em; margin:clamp(40px,4vw,60px) 0 18px; }
.lp-rich h2:first-child { margin-top:0; }
.lp-rich h3 { font-family:var(--f-head); font-weight:600; text-transform:none; font-size:clamp(18px,1.9vw,22px); letter-spacing:.01em; color:var(--ink); margin:34px 0 12px; }
.lp-rich p { color:var(--grey); line-height:1.95; margin-bottom:16px; }
.lp-rich ul { margin:8px 0 20px; padding:0; }
.lp-rich ul li { position:relative; padding-left:26px; margin-bottom:10px; color:var(--grey); line-height:1.75; }
.lp-rich ul li::before { content:""; position:absolute; left:0; top:11px; width:9px; height:9px; border:1px solid var(--navy); background:transparent; }
.lp-rich strong { color:var(--ink); font-weight:600; }
.lp-rich a { color:var(--navy); text-decoration:underline; text-underline-offset:2px; }

/* Callout-Box */
.lp-callout { background:var(--paper-2); border-left:3px solid var(--navy); padding:clamp(22px,2.6vw,32px); margin:28px 0; }
.lp-callout .k-label { display:block; font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--navy); margin-bottom:10px; }
.lp-callout p { margin:0; color:var(--ink); }

/* GEO-Tabelle */
.lp-table { width:100%; border-collapse:collapse; margin:24px 0; font-size:14.5px; }
.lp-table th, .lp-table td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.6; }
.lp-table th { font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-2); }
.lp-table td:first-child { color:var(--ink); font-weight:500; white-space:nowrap; }
.lp-table tr:hover td { background:var(--paper-2); }

/* Vor/Nachteile zweispaltig */
.lp-pros { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,26px); margin:24px 0; }
.lp-pros .col { border:1px solid var(--line); padding:clamp(22px,2.4vw,30px); }
.lp-pros .col h4 { font-size:13px; letter-spacing:.1em; margin-bottom:16px; }
.lp-pros .col.plus h4 { color:var(--navy); }
.lp-pros .col li { list-style:none; padding-left:24px; position:relative; margin-bottom:10px; font-size:14px; line-height:1.65; color:var(--grey); }
.lp-pros .col.plus li::before { content:"+"; position:absolute; left:0; color:var(--navy); font-weight:700; }
.lp-pros .col.minus li::before { content:"–"; position:absolute; left:0; color:var(--grey-2); font-weight:700; }
@media(max-width:640px){ .lp-pros{ grid-template-columns:1fr; } }

/* Typische Fälle — Cards */
.lp-cases { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2vw,28px); }
.lp-case { position:relative; overflow:hidden; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); padding:clamp(28px,3vw,44px); transition:transform .6s var(--ease), box-shadow .5s var(--ease); }
.lp-case::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--navy); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.lp-case:hover { transform:translateY(-6px); box-shadow:0 18px 44px rgba(10,10,10,.10); }
.lp-case:hover::after { transform:scaleX(1); }
.lp-case .tag { font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-2); margin-bottom:14px; }
.lp-case h3 { font-size:clamp(18px,1.9vw,22px); line-height:1.35; margin-bottom:14px; }
.lp-case p { font-size:14px; line-height:1.85; color:var(--grey); margin-bottom:22px; }
.lp-case .arrowlink { margin-top:auto; align-self:flex-start; font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
@media(max-width:640px){ .lp-cases{ grid-template-columns:1fr; } }

/* Leistungs-Kacheln (Checkliste) */
.lp-services { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.lp-svc { display:flex; align-items:center; gap:18px; padding:clamp(24px,2.6vw,34px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .45s var(--ease), padding-left .45s var(--ease); }
.lp-svc:hover { background:var(--paper-2); padding-left:calc(clamp(24px,2.6vw,34px) + 8px); }
.lp-svc .ck { flex-shrink:0; width:26px; height:26px; color:var(--navy); }
.lp-svc .ck svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lp-svc h3 { font-size:15px; letter-spacing:.06em; }
.lp-svc p { font-size:13px; color:var(--grey-2); margin-top:4px; letter-spacing:.02em; }
@media(max-width:820px){ .lp-services{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .lp-services{ grid-template-columns:1fr; } }

/* Timeline (5 Schritte) */
.lp-timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,2vw,28px); position:relative; }
.lp-timeline::before { content:""; position:absolute; top:20px; left:6%; right:6%; height:1px; background:var(--line); z-index:0; }
.lp-step { position:relative; z-index:1; text-align:center; }
.lp-step .n { width:42px; height:42px; margin:0 auto 20px; border:1px solid var(--navy); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--paper); font-family:var(--f-head); font-weight:300; font-size:16px; color:var(--navy); transition:background .5s var(--ease), color .5s var(--ease); }
.lp-timeline.in .lp-step .n, .lp-step:hover .n { background:var(--navy); color:#fff; }
.lp-step h3 { font-size:14px; letter-spacing:.08em; margin-bottom:8px; }
.lp-step p { font-size:13px; line-height:1.7; color:var(--grey); max-width:22ch; margin:0 auto; }
@media(max-width:820px){ .lp-timeline{ grid-template-columns:1fr; gap:0; } .lp-timeline::before{ display:none; } .lp-step{ text-align:left; display:grid; grid-template-columns:42px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); align-items:start; } .lp-step .n{ margin:0; } .lp-step p{ margin:0; max-width:none; } }

/* Downloads */
.lp-dl { border-top:1px solid var(--line); max-width:860px; }
.lp-dl a { display:flex; align-items:center; gap:22px; padding:24px 6px; border-bottom:1px solid var(--line); transition:padding-left .4s var(--ease), background .4s var(--ease); }
.lp-dl a:hover { padding-left:18px; background:var(--paper-2); }
.lp-dl .ic { width:26px; height:26px; color:var(--navy); flex-shrink:0; }
.lp-dl .ic svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.3; }
.lp-dl .t { flex:1; }
.lp-dl .t h3 { font-size:15px; letter-spacing:.04em; margin-bottom:3px; }
.lp-dl .t span { font-size:12px; color:var(--grey-2); letter-spacing:.05em; }
.lp-dl .get { font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); white-space:nowrap; }
.lp-dl a:hover .get { color:var(--navy); }

/* Aktuelle Urteile (Beiträge) — kompakt */
.lp-posts { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); }
.lp-post { border:1px solid var(--line); padding:clamp(24px,2.6vw,34px); transition:transform .5s var(--ease), box-shadow .5s var(--ease); display:flex; flex-direction:column; }
.lp-post:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(10,10,10,.09); }
.lp-post .cat { font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--navy); margin-bottom:14px; }
.lp-post h3 { font-size:16px; line-height:1.4; margin-bottom:14px; }
.lp-post .date { margin-top:auto; font-size:12px; color:var(--grey-2); letter-spacing:.04em; }
@media(max-width:820px){ .lp-posts{ grid-template-columns:1fr; } }

/* Kontaktband */
.lp-contact { background:var(--navy); }
.lp-contact .eyebrow { color:rgba(255,255,255,.85); }
.lp-contact h2 { color:#fff; }
.lp-contact p { color:rgba(255,255,255,.85); }
.lp-contact .lp-c-rows { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.18); margin-top:clamp(30px,3.5vw,46px); }
.lp-contact .lp-c-rows a { background:var(--navy); padding:clamp(24px,2.8vw,38px); display:flex; flex-direction:column; gap:10px; transition:background .4s var(--ease); }
.lp-contact .lp-c-rows a:hover { background:#22315f; }
.lp-contact .lp-c-rows .l { font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.lp-contact .lp-c-rows .v { font-family:var(--f-head); font-weight:300; font-size:clamp(17px,1.6vw,20px); color:#fff; }
@media(max-width:720px){ .lp-contact .lp-c-rows{ grid-template-columns:1fr; } }

/* ============================================================
   RECHTSGEBIETE-HUB — zentrale Übersichtsseite (v154)
   ============================================================ */
/* Kennzahlen */
.rg-stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.rg-stats .st { padding:clamp(30px,3.4vw,48px) clamp(22px,2.4vw,34px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.rg-stats .n { font-family:var(--f-head); font-weight:300; font-size:clamp(30px,3.6vw,52px); line-height:1; letter-spacing:.03em; color:var(--ink); }
.rg-stats .n em { font-style:normal; color:var(--navy); }
.rg-stats .l { margin-top:14px; font-size:13.5px; line-height:1.6; color:var(--grey); }
@media(max-width:760px){ .rg-stats{ grid-template-columns:1fr 1fr; } }

/* Große Rechtsgebiets-Karten mit Bild */
.rg-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); }
.rg-card { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); overflow:hidden; transition:transform .6s var(--ease), box-shadow .5s var(--ease); }
.rg-card:hover { transform:translateY(-7px); box-shadow:0 22px 50px rgba(10,10,10,.12); }
.rg-card .ph { position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--paper-2); }
.rg-card .ph > div { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1.1s var(--ease); }
.rg-card:hover .ph > div { transform:scale(1.06); }
.rg-card .ph .ico { position:absolute; left:20px; bottom:20px; width:46px; height:46px; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--navy); box-shadow:0 8px 20px rgba(10,10,10,.18); }
.rg-card .ph .ico svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.rg-card .bd { display:flex; flex-direction:column; flex:1; padding:clamp(26px,2.8vw,38px); }
.rg-card .num { font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.2em; color:var(--grey-2); margin-bottom:12px; }
.rg-card h3 { font-size:clamp(18px,1.9vw,22px); line-height:1.3; letter-spacing:.02em; margin-bottom:14px; }
.rg-card p { font-size:14px; line-height:1.85; color:var(--grey); margin-bottom:20px; }
.rg-card .rel { margin-top:auto; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--grey-2); line-height:1.7; }
.rg-card .rel b { display:block; font-family:var(--f-head); font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); margin-bottom:6px; }
.rg-card .rel a { color:var(--navy); }
.rg-card .more { margin-top:16px; font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--navy); display:inline-flex; align-items:center; gap:10px; }
.rg-card .more::after { content:""; width:22px; height:1px; background:currentColor; transition:width .4s var(--ease); }
.rg-card:hover .more::after { width:34px; }
@media(max-width:900px){ .rg-cards{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .rg-cards{ grid-template-columns:1fr; } }

/* Entscheidungshilfe */
.rg-decide { border-top:1px solid var(--line); }
.rg-drow { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:clamp(16px,3vw,40px); padding:clamp(22px,2.6vw,32px) 6px; border-bottom:1px solid var(--line); transition:padding-left .45s var(--ease), background .4s var(--ease); }
.rg-drow:hover { padding-left:16px; background:var(--paper-2); }
.rg-drow .sit { font-family:var(--f-head); font-weight:300; text-transform:none; font-size:clamp(16px,1.7vw,21px); color:var(--ink); }
.rg-drow .arw { color:var(--grey-2); font-size:18px; }
.rg-drow .area { font-family:var(--f-head); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); white-space:nowrap; display:inline-flex; align-items:center; gap:10px; }
.rg-drow:hover .area::after { content:"→"; }
@media(max-width:640px){ .rg-drow{ grid-template-columns:1fr; gap:8px; } .rg-drow .arw{ display:none; } .rg-drow .area{ font-size:11px; } }

/* Themen-Chips (Mandanten suchen häufig / verwandt) */
.rg-topics { display:flex; flex-wrap:wrap; gap:12px; }
.rg-topics a { font-family:var(--f-head); font-weight:600; font-size:12px; letter-spacing:.06em; color:var(--ink); border:1px solid var(--line); padding:12px 20px; transition:all .4s var(--ease); }
.rg-topics a:hover { border-color:var(--navy); color:var(--navy); background:var(--paper-2); }

/* Häufige Irrtümer */
.rg-myth { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2vw,26px); }
.rg-mcard { border:1px solid var(--line); padding:clamp(24px,2.6vw,34px); }
.rg-mcard .mi { font-family:var(--f-head); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.rg-mcard .mi::before { content:"✕"; color:#b23; font-weight:700; }
.rg-mcard h3 { font-size:16px; line-height:1.4; margin-bottom:14px; color:var(--ink); }
.rg-mcard .fact { font-size:14px; line-height:1.85; color:var(--grey); padding-top:14px; border-top:1px solid var(--line); }
.rg-mcard .fact::before { content:"Richtig ist: "; font-weight:600; color:var(--navy); }
@media(max-width:640px){ .rg-myth{ grid-template-columns:1fr; } }

/* Wissen kompakt (Q&A-Blöcke) */
.rg-know { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,44px) clamp(30px,4vw,64px); }
.rg-know .qa h3 { font-family:var(--f-head); font-weight:600; text-transform:none; font-size:18px; letter-spacing:.01em; color:var(--ink); margin-bottom:10px; }
.rg-know .qa p { font-size:14.5px; line-height:1.9; color:var(--grey); }
@media(max-width:760px){ .rg-know{ grid-template-columns:1fr; } }

/* Sticky Termin-Button */
.rg-sticky { position:fixed; right:clamp(16px,2.5vw,32px); bottom:clamp(16px,2.5vw,32px); z-index:60; background:var(--navy); color:#fff; font-family:var(--f-head); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:16px 26px; box-shadow:0 14px 34px rgba(41,60,116,.4); opacity:0; transform:translateY(20px); pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease), background .3s; }
.rg-sticky.show { opacity:1; transform:none; pointer-events:auto; }
.rg-sticky:hover { background:#22315f; }
@media(max-width:520px){ .rg-sticky{ left:16px; right:16px; text-align:center; } }

/* ============================================================
   FACHTEXT 2-spaltig (v155) — Fix „halber leerer Bildschirm"
   Sticky-Titel links, Fließtext rechts füllt die Breite
   ============================================================ */
.section > .wrap:has(> .lp-rich){ display:grid; grid-template-columns:minmax(200px,290px) minmax(0,72ch); justify-content:center; gap:clamp(34px,5vw,86px); align-items:start; }
.section > .wrap:has(> .lp-rich) > .rv:first-child{ position:sticky; top:104px; margin-bottom:0 !important; max-width:none !important; }
.section > .wrap:has(> .lp-rich) > .lp-rich{ max-width:none; }
@media(max-width:900px){
  .section > .wrap:has(> .lp-rich){ display:block; }
  .section > .wrap:has(> .lp-rich) > .rv:first-child{ position:static; margin-bottom:clamp(28px,5vw,40px) !important; }
}

/* ============================================================
   LEISTUNGSÜBERSICHT (v156) — rechtsgebiete.html
   Alternierende Bild-Karten · Vertrauen · Prozess
   Nutzt Systemvariablen, .rv-Reveal (app.js), Innenrahmen-Signatur
   ============================================================ */

/* Einleitung, ruhig zentriert */
.lu-intro { max-width: 820px; margin: 0 auto; text-align: center; }
.lu-intro .lead { max-width: none; }
.lu-intro .dotsep { margin: 30px auto 0; }

/* Kartenfolge: großzügige vertikale Rhythmik */
.lu-list { display: flex; flex-direction: column; gap: clamp(72px, 8vw, 132px); padding: clamp(72px, 8vw, 124px) 0; }

/* Kopfzeile jeder Karte: Nummer + Label links, Icon rechts */
.lu-kicker { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: clamp(22px, 2.4vw, 30px); }
.lu-kicker .kn { display: inline-flex; align-items: baseline; gap: 14px; }
.lu-kicker .kn b { font-family: var(--f-head); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: .08em; color: var(--navy); line-height: 1; }
.lu-kicker .kn span { font-family: var(--f-head); font-weight: 600; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--grey-2); }
.lu-ico { width: clamp(38px, 3.4vw, 46px); height: clamp(38px, 3.4vw, 46px); color: var(--navy); flex-shrink: 0; }
.lu-ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }

/* Split-Karten: Bild bis zum Bildschirmrand, Text daneben, alternierend */
.lu-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.lu-media { position: relative; overflow: hidden; min-height: clamp(420px, 42vw, 620px); background: var(--paper-2); }
.lu-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.lu-split:hover .lu-media img { transform: scale(1.05); }
.lu-media::after { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(255,255,255,.6); pointer-events: none; z-index: 2; }
.lu-split.rev .lu-media { order: 2; }
.lu-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(44px, 5.5vw, 104px); background: #fff; }
.lu-split.tint .lu-body { background: var(--paper-2); }
.lu-body h2 { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.35; }
.lu-body .dotsep { margin: 22px 0 0; }
.lu-body p { margin: 24px 0 0; font-size: 14.5px; line-height: 2; color: var(--grey); max-width: 58ch; }
.lu-body .btn { margin-top: clamp(28px, 3vw, 38px); align-self: flex-start; }
.lu-rel { margin-top: 20px; font-size: 12.5px; letter-spacing: .04em; color: var(--grey-2); }
.lu-rel a { color: var(--navy); }
.lu-rel a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Doppel-Karten: zwei Rechtsgebiete nebeneinander */
.lu-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 44px); }
.lu-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.lu-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); z-index: 3; }
.lu-card:hover { transform: translateY(-8px); box-shadow: 0 24px 54px rgba(10,10,10,.12); }
.lu-card:hover::after { transform: scaleX(1); }
.lu-cmedia { position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--paper-2); }
.lu-cmedia img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.lu-card:hover .lu-cmedia img { transform: scale(1.06); }
.lu-cbody { display: flex; flex-direction: column; flex: 1; padding: clamp(30px, 3.4vw, 54px); }
.lu-cbody .lu-kicker { margin-bottom: 18px; }
.lu-cbody h2 { font-size: clamp(19px, 1.9vw, 25px); line-height: 1.4; }
.lu-cbody p { margin: 18px 0 28px; font-size: 14px; line-height: 1.95; color: var(--grey); }
.lu-cbody .btn { margin-top: auto; align-self: flex-start; }

/* Große Panorama-Karte: Bild volle Breite, weißes Panel ragt hinein */
.lu-wmedia { position: relative; overflow: hidden; height: clamp(400px, 48vw, 620px); }
.lu-wmedia img { width: 100%; height: 100%; object-fit: cover; }
/* Kein Innenrahmen bei der Panorama-Variante: das überlappende Panel würde ihn abschneiden */
.lu-wide-panel { position: relative; z-index: 5; background: #fff; max-width: 720px; padding: clamp(36px, 4.5vw, 68px); margin-top: clamp(-160px, -12vw, -96px); box-shadow: 0 26px 60px rgba(10,10,10,.13); }
.lu-wide-panel h2 { font-size: clamp(21px, 2.2vw, 30px); line-height: 1.35; }
.lu-wide-panel p { margin: 20px 0 0; font-size: 14.5px; line-height: 2; color: var(--grey); }
.lu-wide-panel .btn { margin-top: clamp(26px, 3vw, 36px); }

/* Vertrauen: großes Bild, Panel mit 6 Vorteilen ragt hinein */
.lu-trust-media { position: relative; overflow: hidden; height: clamp(380px, 46vw, 580px); }
.lu-trust-media img { width: 100%; height: 100%; object-fit: cover; }
.lu-trust-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.32)); }
.lu-trust-panel { position: relative; z-index: 5; background: #fff; margin-top: clamp(-130px, -10vw, -80px); padding: clamp(40px, 5vw, 76px) clamp(28px, 4vw, 68px); box-shadow: 0 26px 60px rgba(10,10,10,.14); }
.lu-trust-panel .lead { max-width: 62ch; margin-top: 22px; }
.lu-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 3.6vw, 54px) clamp(28px, 3.4vw, 58px); margin-top: clamp(38px, 4.2vw, 56px); }
.lu-val { position: relative; border-top: 1px solid var(--line); padding-top: 22px; }
.lu-val::before { content: ""; position: absolute; top: -1px; left: 0; width: 46px; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) var(--d, 0s); }
.lu-val.in::before { transform: scaleX(1); }
.lu-val h3 { font-size: 14px; letter-spacing: .13em; line-height: 1.5; }
.lu-val p { margin-top: 12px; font-size: 13.5px; line-height: 1.9; color: var(--grey); }
.lu-val.rv-1 { transition-delay: .08s; } .lu-val.rv-2 { transition-delay: .16s; }
.lu-val.rv-3 { transition-delay: .24s; } .lu-val.rv-4 { transition-delay: .32s; } .lu-val.rv-5 { transition-delay: .4s; }

/* Ablauf: 4 Schritte, Linie füllt sich nacheinander */
.lu-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 3.2vw, 48px); }
.lu-step { position: relative; padding-top: 28px; }
.lu-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.lu-step::after { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) var(--d, 0s); }
.lu-step.in::after { transform: scaleX(1); }
.lu-step:nth-child(1) { --d: 0s; } .lu-step:nth-child(2) { --d: .35s; }
.lu-step:nth-child(3) { --d: .7s; } .lu-step:nth-child(4) { --d: 1.05s; }
.lu-step .n { font-family: var(--f-head); font-weight: 300; font-size: clamp(30px, 3.4vw, 48px); letter-spacing: .06em; line-height: 1; color: var(--grey-2); transition: color .8s var(--ease) var(--d, 0s); }
.lu-step.in .n { color: var(--navy); }
.lu-step h3 { margin-top: 16px; font-size: 15px; letter-spacing: .14em; }
.lu-step p { margin-top: 12px; font-size: 13.5px; line-height: 1.9; color: var(--grey); max-width: 32ch; }

@media (max-width: 980px) {
  .lu-split { grid-template-columns: 1fr; }
  .lu-split.rev .lu-media { order: 0; }
  .lu-media { min-height: clamp(260px, 54vw, 420px); }
  .lu-body { padding: clamp(34px, 6vw, 56px) var(--pad); }
  .lu-duo { grid-template-columns: 1fr; }
  .lu-vals { grid-template-columns: 1fr 1fr; }
  .lu-process { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .lu-wide-panel { max-width: none; margin-top: clamp(-90px, -10vw, -60px); }
}
@media (max-width: 600px) {
  .lu-vals { grid-template-columns: 1fr; }
  .lu-process { grid-template-columns: 1fr; }
  .lu-list { gap: clamp(56px, 12vw, 80px); }
}

/* Weitere Leistungen — minimalistische Kacheln mit Icon (v159) */
.lu-others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; border-top: 1px solid var(--line); }
.lu-others a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; min-height: clamp(140px, 13vw, 180px); padding: clamp(28px, 3vw, 42px) clamp(14px, 1.5vw, 22px); background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .1em; font-size: clamp(12.5px, 1.05vw, 15px); line-height: 1.55; color: var(--ink); transition: color .4s var(--ease), background .4s var(--ease); }
.lu-others a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.lu-others .ico { width: clamp(30px, 2.6vw, 38px); height: clamp(30px, 2.6vw, 38px); color: var(--navy); opacity: .8; transition: transform .5s var(--ease), opacity .4s var(--ease); }
.lu-others .ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.lu-others .go { font-family: var(--f-head); font-weight: 600; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--navy); opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.lu-others a:hover { color: var(--navy); background: #faf9f7; }
.lu-others a:hover::after { transform: scaleX(1); }
.lu-others a:hover .ico { transform: translateY(-4px); opacity: 1; }
.lu-others a:hover .go { opacity: 1; transform: none; }
/* Alle Kacheln gleich groß: 7. Kachel = normale Zelle, mittig; linke Rasterlinie an der ersten Kachel je Reihe */
.lu-others a:nth-child(3n+1) { border-left: 1px solid var(--line); }
.lu-others a:nth-child(7) { grid-column: 2; }
@media (max-width: 620px) {
  .lu-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lu-others a { min-height: 120px; gap: 14px; }
  .lu-others .go { display: none; }
  .lu-others a:nth-child(3n+1) { border-left: 0; }
  .lu-others a:nth-child(2n+1) { border-left: 1px solid var(--line); }
  .lu-others a:nth-child(7) { grid-column: auto; }
}

/* ============ BERATUNGSSITUATIONEN (Rechtsgebiets-Seiten) ============ */
.lu-cases { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--line); max-width: 58ch; }
.lu-cases .lc-label { display: block; font-family: var(--f-head); font-weight: 600; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--navy); }
.lu-cases ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 13px; }
.lu-cases li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.85; color: var(--grey); }
.lu-cases li::before { content: ""; position: absolute; left: 0; top: .82em; width: 12px; height: 1px; background: var(--navy); opacity: .75; }
.lu-cases li b { font-weight: 600; color: var(--ink); }
.lu-body .lu-cases + .btn, .lu-cbody .lu-cases + .btn { margin-top: 28px; }
.lu-cbody .lu-cases { max-width: none; }
@media (max-width: 620px) { .lu-cases li { font-size: 13.5px; } }


/* ============================================================
   RECHTSGEBIETE — Mandantensicht 2026-08-05 v5  ·  scoped .rgw-*
   Aufbau: Problem → Vertrauen → Unterschied → Ablauf → Fachgebiete
   ============================================================ */
.rgw-sec { position: relative; overflow: hidden; }
.rgw-ink { background: #15161a; }
.rgw-navy { background: #293c74; }
.rgw-soft { background: var(--paper-2); }
.rgw-sec > .wrap, .rgw-sec > .rgw-narrow { position: relative; z-index: 1; }
.rgw-narrow { max-width: 900px; margin: 0 auto; padding: 0 var(--pad); }

.rgw-ghost { position: absolute; z-index: 0; pointer-events: none; user-select: none; font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .02em; line-height: .8; white-space: nowrap; color: var(--ink); opacity: .03; font-size: clamp(88px, 15vw, 210px); }
.rgw-ink .rgw-ghost, .rgw-navy .rgw-ghost { color: #fff; opacity: .045; }
.rgw-ghost.tl { top: clamp(40px, 6vw, 90px); left: calc(var(--pad) * -0.35); }
.rgw-ghost.br { top: 50%; right: calc(var(--pad) * -0.2); transform: translateY(-50%); }

.rgw-kicker { display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-head); font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--navy); }
.rgw-kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.rgw-ink .rgw-kicker, .rgw-navy .rgw-kicker { color: #a9bcec; }
.rgw-display { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; color: var(--ink); letter-spacing: .015em; line-height: 1.1; font-size: clamp(34px, 5.4vw, 82px); overflow-wrap: break-word; }
.rgw-ink .rgw-display, .rgw-navy .rgw-display { color: #fff; }
.rgw-h2 { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .08em; line-height: 1.22; font-size: clamp(27px, 3.2vw, 46px); color: var(--ink); overflow-wrap: break-word; }
.rgw-ink .rgw-h2, .rgw-navy .rgw-h2 { color: #fff; }
.rgw-body { font-size: 15.5px; line-height: 2.05; color: var(--grey); max-width: 66ch; }
.rgw-body a { color: var(--navy); }

/* 2 · Problemkarten */
.rgw-help { padding: clamp(84px, 10vw, 150px) 0 clamp(80px, 9.5vw, 140px); }
.rgw-help-head { max-width: 900px; }
.rgw-help-head p { font-size: 15.5px; line-height: 2; color: var(--grey); max-width: 58ch; margin-top: 26px; }
/* Innenabstand der Kacheln und Ausgleich nach außen sind dieselbe Zahl — deshalb
   eine Variable statt zweier Werte. Der Text steht dadurch immer bündig unter der
   Überschrift, egal wie groß der Innenabstand gerade ist.

   Grundregel: Der Wert wird auf schmalen Geräten kleiner, aber nie 0. Bei 0 läge
   die Hover-/Aktivfläche der Kachel exakt auf dem Text — eine hervorgehobene
   Fläche braucht ringsum Luft. Bei 16px bleibt die Fläche 8px vom Displayrand
   entfernt und umgibt den Text mit 16px Abstand.
   Gilt genauso für .rgw-laws-list, .rgw-readlist und .lg-args. */
.rgw-cases { --kachel-pad: clamp(22px, 2.4vw, 38px); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(48px, 5.5vw, 76px); margin-inline: calc(var(--kachel-pad) * -1); border-top: 1px solid var(--line); }
.rgw-case { position: relative; display: flex; flex-direction: column; padding: clamp(30px, 3.2vw, 46px) var(--kachel-pad); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: background .45s var(--ease); }
.rgw-case:not(:nth-child(3n+1)) { border-left: 1px solid var(--line); }
.rgw-case::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.rgw-case:hover { background: var(--paper-2); }
.rgw-case:hover::after { transform: scaleX(1); }
.rgw-case h3 { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .05em; line-height: 1.32; font-size: clamp(18px, 1.7vw, 26px); max-width: 18ch; }
.rgw-case p { font-size: 14.5px; line-height: 1.85; color: var(--grey); margin-top: 16px; }
.rgw-case .go { margin-top: clamp(24px, 2.6vw, 34px); padding-top: 0; display: inline-flex; align-items: center; gap: 11px; font-family: var(--f-head); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--navy); transition: gap .4s var(--ease); }
.rgw-case .go::after { content: ""; width: 20px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.rgw-case:hover .go { gap: 15px; }
.rgw-case:hover .go::after { width: 30px; }
.rgw-case-foot { margin-top: auto; }
.rgw-help-more { margin-top: clamp(40px, 4.5vw, 60px); }

/* 3 · Vertrauen (dunkel, mit Kennzahlen) */
.rgw-trust { padding: clamp(96px, 12vw, 180px) 0; }
.rgw-trust .rgw-display { max-width: 17ch; }
.rgw-trust p.lead-dark { font-size: 15.5px; line-height: 2.05; color: rgba(255,255,255,.62); max-width: 58ch; margin-top: clamp(28px, 3.2vw, 44px); }
.rgw-tnums { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(56px, 6.5vw, 96px); border-top: 1px solid rgba(255,255,255,.16); }
.rgw-tnum { padding: clamp(28px, 3.2vw, 44px) clamp(18px, 2.4vw, 40px) 0; }
.rgw-tnum:not(:first-child) { border-left: 1px solid rgba(255,255,255,.16); }
.rgw-tnum:first-child { padding-left: 0; }
.rgw-tnum .v { font-family: var(--f-head); font-weight: 300; font-size: clamp(38px, 4.6vw, 70px); line-height: 1; color: #fff; white-space: nowrap; }
.rgw-tnum .v em { font-style: normal; color: #8ea6e0; }
.rgw-tnum .k { margin-top: 14px; font-family: var(--f-head); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.45); }

/* 4 · Warum corelaw */
.rgw-why { padding: clamp(88px, 11vw, 160px) 0; }
.rgw-why-head { max-width: 820px; }
.rgw-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: clamp(52px, 6vw, 84px); border-top: 1px solid var(--line); }
.rgw-wcell { position: relative; overflow: hidden; padding: clamp(38px, 4.4vw, 62px) clamp(26px, 3vw, 54px) clamp(38px, 4.4vw, 62px) 0; border-bottom: 1px solid var(--line); }
.rgw-wcell:nth-child(even) { padding-left: clamp(26px, 3vw, 54px); padding-right: 0; border-left: 1px solid var(--line); }
.rgw-wcell .gn { position: absolute; top: clamp(8px, 1.2vw, 18px); right: 0; font-family: var(--f-head); font-weight: 300; font-size: clamp(64px, 8vw, 130px); line-height: .8; color: var(--ink); opacity: .05; pointer-events: none; }
.rgw-wcell:nth-child(even) .gn { right: clamp(6px, 1vw, 16px); }
.rgw-wcell h3 { position: relative; font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.35; max-width: 18ch; }
.rgw-wcell p { position: relative; font-size: 14.5px; line-height: 1.95; color: var(--grey); margin-top: 16px; max-width: 36ch; }

/* 5 · Ablauf */
.rgw-flow { padding: clamp(88px, 11vw, 160px) 0; }
.rgw-flow-top { max-width: 900px; }
.rgw-flow-top .rgw-h2 { max-width: 24ch; }
.rgw-track { position: relative; margin-top: clamp(60px, 7vw, 100px); padding-top: 34px; }
.rgw-track::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #dcdbd7; }
.rgw-prog { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform 1.7s var(--ease); }
.rgw-prog.in { transform: scaleX(1); }
.rgw-track-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(22px, 3vw, 52px); }
.rgw-tstep { position: relative; }
.rgw-tstep::before { content: ""; position: absolute; top: -38px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--navy); transform: scale(0); transition: transform .5s var(--ease); }
.rgw-tstep.in::before { transform: scale(1); }
.rgw-tstep:nth-child(even) { padding-top: clamp(18px, 2.4vw, 40px); }
.rgw-tstep .n { font-family: var(--f-head); font-weight: 300; font-size: clamp(34px, 4.2vw, 62px); line-height: 1; color: var(--navy); }
.rgw-tstep h3 { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .1em; font-size: 15px; margin-top: 16px; }
.rgw-tstep p { font-size: 13.5px; line-height: 1.85; color: var(--grey); margin-top: 12px; max-width: 30ch; }

/* 6 · Rechtsgebiete — 4 Kacheln je Zeile (Navy) */
.rgw-laws { padding: clamp(84px, 10vw, 155px) 0 clamp(80px, 9.5vw, 145px); }
.rgw-laws-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 76px); align-items: end; }
.rgw-laws-head p { font-size: 15px; line-height: 1.95; color: rgba(255,255,255,.62); max-width: 46ch; }
.rgw-laws-list { --kachel-pad: clamp(18px, 1.9vw, 28px); display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(46px, 5.5vw, 76px); margin-inline: calc(var(--kachel-pad) * -1); }
.rgw-law { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 36px) var(--kachel-pad); border-top: 1px solid rgba(255,255,255,.18); text-decoration: none; transition: background .45s var(--ease); }
.rgw-law:not(:nth-child(4n+1)) { border-left: 1px solid rgba(255,255,255,.18); }
.rgw-law:nth-last-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,.18); }
.rgw-law:hover { background: rgba(255,255,255,.06); }
.rgw-law .no { font-family: var(--f-head); font-size: 11.5px; letter-spacing: .2em; color: rgba(255,255,255,.55); transition: color .4s var(--ease); }
.rgw-law h3 { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .05em; line-height: 1.35; font-size: clamp(15px, 1.3vw, 20px); color: #fff; margin-top: 18px; transition: transform .5s var(--ease); }
.rgw-law p { font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.6); margin-top: 14px; transition: transform .5s var(--ease); }
.rgw-law-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: clamp(24px, 2.6vw, 36px); }
.rgw-law .more { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-head); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #a9bcec; transition: gap .4s var(--ease); }
.rgw-law .more::after { content: ""; width: 16px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.rgw-law:hover h3, .rgw-law:hover p { transform: translateX(5px); }
.rgw-law:hover .more { gap: 13px; }
.rgw-law:hover .more::after { width: 24px; }
.rgw-law:hover .no { color: #a9bcec; }
.rgw-go { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .5s var(--ease); }
.rgw-go svg { width: 21px; height: 21px; fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s var(--ease); }
.rgw-law:hover .rgw-go { transform: translateX(6px); }
.rgw-law:hover .rgw-go svg { stroke: #fff; }
.rgw-law.rgw-ask { background: rgba(255,255,255,.055); }
.rgw-law.rgw-ask:hover { background: rgba(255,255,255,.1); }
.rgw-law.rgw-ask .no { color: #a9bcec; }
.rgw-law.rgw-ask .rgw-go svg { stroke: #fff; }

/* 7 · Hilfreiche Beiträge */
.rgw-reads { padding: clamp(84px, 10vw, 150px) 0; }
.rgw-reads-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px; }
.rgw-reads-head .rgw-h2 { max-width: 22ch; }
.rgw-readlist { --kachel-pad: clamp(22px, 2.4vw, 38px); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(46px, 5.5vw, 74px); margin-inline: calc(var(--kachel-pad) * -1); border-top: 1px solid var(--line); }
.rgw-read { display: flex; flex-direction: column; padding: clamp(30px, 3.2vw, 44px) var(--kachel-pad); text-decoration: none; color: var(--ink); transition: background .45s var(--ease); }
.rgw-read:not(:first-child) { border-left: 1px solid var(--line); padding-left: var(--kachel-pad); }
.rgw-read:hover { background: var(--paper-2); }
.rgw-read .meta { font-family: var(--f-head); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--grey-2); }
.rgw-read h3 { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .05em; line-height: 1.4; font-size: clamp(16px, 1.4vw, 21px); margin-top: 18px; transition: color .4s var(--ease); }
.rgw-read:hover h3 { color: var(--navy); }
.rgw-read .go { margin-top: auto; padding-top: clamp(24px, 2.6vw, 34px); display: inline-flex; align-items: center; gap: 11px; font-family: var(--f-head); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--navy); transition: gap .4s var(--ease); }
.rgw-read .go::after { content: ""; width: 20px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.rgw-read:hover .go { gap: 15px; }
.rgw-read:hover .go::after { width: 30px; }

/* 8 · Abschluss */
.rgw-end { padding: clamp(110px, 14vw, 210px) 0; }
.rgw-end .rgw-display { max-width: 16ch; }
.rgw-end p { font-size: 15.5px; line-height: 2; color: rgba(255,255,255,.62); max-width: 52ch; margin: clamp(28px, 3.4vw, 44px) 0 clamp(38px, 4.4vw, 56px); }
.rgw-end-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3vw, 46px); }
.rgw-end-tel { font-family: var(--f-head); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5); text-decoration: none; transition: color .4s var(--ease); }
.rgw-end-tel:hover { color: #fff; }

@media (max-width: 1060px) {
  .rgw-cases { grid-template-columns: repeat(2, 1fr); }
  .rgw-case:not(:nth-child(3n+1)) { border-left: 0; }
  .rgw-case:nth-child(even) { border-left: 1px solid var(--line); padding-left: var(--kachel-pad); }
  .rgw-tnums { grid-template-columns: repeat(2, 1fr); }
  .rgw-tnum:nth-child(odd) { border-left: 0; padding-left: 0; }
  .rgw-why-grid { grid-template-columns: 1fr; }
  .rgw-wcell, .rgw-wcell:nth-child(even) { padding: clamp(34px, 5vw, 50px) 0; border-left: 0; }
  .rgw-track-inner { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .rgw-tstep:nth-child(even) { padding-top: 0; }
  .rgw-tstep::before { display: none; }
  .rgw-laws-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .rgw-laws-list { grid-template-columns: repeat(2, 1fr); }
  .rgw-law:not(:nth-child(4n+1)) { border-left: 0; }
  .rgw-law:nth-child(even) { border-left: 1px solid rgba(255,255,255,.18); }
  .rgw-law:nth-last-child(-n+4) { border-bottom: 0; }
  .rgw-law:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.18); }
  /* Einspaltig: kein Innenabstand mehr, also auch kein Ausgleich nach außen. */
  .rgw-readlist { grid-template-columns: 1fr; --kachel-pad: 16px; }
  .rgw-read, .rgw-read:not(:first-child) { border-left: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .rgw-cases { grid-template-columns: 1fr; --kachel-pad: 16px; }
  .rgw-case, .rgw-case:nth-child(even), .rgw-case:nth-child(odd) { border-left: 0; }
  .rgw-tnums { grid-template-columns: 1fr; }
  .rgw-tnum { border-left: 0; padding-left: 0; }
  .rgw-tnum:not(:first-child) { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .rgw-track-inner { grid-template-columns: 1fr; row-gap: 38px; }
  .rgw-laws-list { grid-template-columns: 1fr; --kachel-pad: 16px; }
  .rgw-law, .rgw-law:nth-child(even), .rgw-law:nth-child(odd) { border-left: 0; }
  .rgw-law:nth-last-child(-n+2) { border-bottom: 0; }
  .rgw-law:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
  .rgw-ghost { font-size: clamp(64px, 20vw, 120px); }
}

/* ------------------------------------------------------------
   v5.1 — Feinschliff: Microinteractions, Statements, Timeline
   ------------------------------------------------------------ */

/* Wortweises Reveal für große Statements */
.rgw-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.rgw-words .w > i { display: inline-block; font-style: inherit; transform: translateY(105%); opacity: 0; transition: transform .95s var(--ease), opacity .8s var(--ease); }
.rgw-words.on .w > i { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rgw-words .w > i { transform: none; opacity: 1; } }

/* Ghost mit Parallax + mehrzeilig */
.rgw-ghost { transform: translate3d(0, var(--gy, 0px), 0); will-change: transform; }
.rgw-ghost.br { transform: translate3d(0, calc(-50% + var(--gy, 0px)), 0); }
.rgw-ghost.block { white-space: normal; max-width: 44%; line-height: .86; }
.rgw-ghost.block.right { right: calc(var(--pad) * -0.1); text-align: right; }
.rgw-ghost.block.left { left: calc(var(--pad) * -0.1); text-align: left; }

/* Editorial-Pause: Statement allein auf der Fläche */
.rgw-pause { padding: clamp(110px, 14vw, 215px) 0; }
.rgw-pause .rgw-display { max-width: 20ch; }
.rgw-pause.right { display: flex; justify-content: flex-end; }
.rgw-pause.right .rgw-display { text-align: right; }
.rgw-pause .sub { font-size: 15px; line-height: 2; color: var(--grey); max-width: 46ch; margin-top: clamp(26px, 3vw, 40px); }
.rgw-pause.right .sub { margin-left: auto; text-align: right; }

/* Problemkarten: Hover-Choreografie */
.rgw-help-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 80px); align-items: end; max-width: none; }
.rgw-help-head p { margin-top: 0; padding-bottom: 6px; }
.rgw-case { overflow: hidden; transition: background .5s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease); }
.rgw-case::before { content: ""; position: absolute; inset: 0; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(41,60,116,.07), transparent 62%); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.rgw-case:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(10,10,10,.09); }
.rgw-case:hover::before { opacity: 1; }
.rgw-case h3 { position: relative; transition: color .45s var(--ease), letter-spacing .55s var(--ease), transform .55s var(--ease); }
.rgw-case:hover h3 { color: var(--navy); letter-spacing: .062em; }
.rgw-case p { position: relative; transition: color .45s var(--ease), transform .6s var(--ease); }
.rgw-case:hover p { color: #4a4a4a; transform: translateX(4px); }
.rgw-case .go { position: relative; }
.rgw-case .go .tip { display: inline-block; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg) translateX(-4px); opacity: 0; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.rgw-case:hover .go .tip { opacity: 1; transform: rotate(45deg) translateX(0); }
.rgw-case::after { height: 1px; background: var(--navy); }
.rgw-case:hover::after { height: 2px; }

/* Rechtsgebiete-Kacheln: gleicher Schimmer */
.rgw-law { overflow: hidden; }
.rgw-law::before { content: ""; position: absolute; inset: 0; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.07), transparent 60%); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.rgw-law:hover::before { opacity: 1; }
.rgw-law > * { position: relative; }

/* Timeline: aktiver Schritt */
.rgw-track::before { background: #d6d5d1; }
.rgw-prog { transition: none; }
.rgw-tstep::before { background: var(--paper-2); border-color: #c3c2be; transform: scale(1); transition: background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); }
.rgw-tstep.on::before { background: var(--navy); border-color: var(--navy); transform: scale(1.25); }
.rgw-tstep .n { font-size: clamp(42px, 5.2vw, 78px); color: #c9c8c4; transition: color .6s var(--ease); }
.rgw-tstep.on .n { color: var(--navy); }
.rgw-tstep h3 { color: var(--grey-2); transition: color .6s var(--ease); }
.rgw-tstep.on h3 { color: var(--ink); }
.rgw-tstep p { transition: color .6s var(--ease); }
.rgw-tstep.on p { color: var(--grey); }

/* „Was bei uns anders läuft“ — asymmetrisch, Ziffer als Gestaltungselement */
.rgw-why-grid { display: grid; grid-template-columns: repeat(12, 1fr); border-top: 1px solid var(--line); }
.rgw-wcell { display: grid; grid-template-columns: clamp(54px, 5.6vw, 84px) minmax(0, 1fr); gap: 0 clamp(20px, 2.4vw, 40px); align-items: start; padding: clamp(40px, 4.6vw, 68px) clamp(26px, 3vw, 54px) clamp(40px, 4.6vw, 68px) 0; border-bottom: 1px solid var(--line); overflow: visible; }
.rgw-wcell .gn { grid-column: 1; grid-row: 1 / span 2; width: 100%; }
.rgw-wcell h3 { grid-column: 2; grid-row: 1; }
.rgw-wcell p { grid-column: 2; grid-row: 2; }
.rgw-wcell:nth-child(1) { grid-column: span 7; }
.rgw-wcell:nth-child(2) { grid-column: span 5; border-left: 1px solid var(--line); padding-left: clamp(26px, 3vw, 54px); padding-right: 0; }
.rgw-wcell:nth-child(3) { grid-column: span 5; }
.rgw-wcell:nth-child(4) { grid-column: span 7; border-left: 1px solid var(--line); padding-left: clamp(26px, 3vw, 54px); padding-right: 0; }
.rgw-wcell .gn { position: static; font-family: var(--f-head); font-weight: 300; font-size: clamp(30px, 3vw, 46px); line-height: 1; color: var(--navy); opacity: 1; padding-top: 4px; transform: translateY(8px); opacity: 0; transition: transform .8s var(--ease), opacity .8s var(--ease); }
.rgw-wcell.in .gn { transform: translateY(0); opacity: 1; }
.rgw-wcell .gn::after { content: ""; display: block; width: clamp(38px, 4vw, 60px); height: 1px; background: var(--navy); margin-top: 12px; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .15s; }
.rgw-wcell.in .gn::after { transform: scaleX(1); }
.rgw-wcell h3 { max-width: 20ch; }
.rgw-wcell p { max-width: 46ch; }

/* CTA-Bereiche */
.rgw-end .rgw-display { max-width: 18ch; }
.rgw-help-more .arrowlink { font-size: 12px; }

@media (max-width: 1060px) {
  .rgw-help-head { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .rgw-help-head p { padding-bottom: 0; }
  .rgw-why-grid { grid-template-columns: 1fr; }
  .rgw-wcell:nth-child(1), .rgw-wcell:nth-child(2), .rgw-wcell:nth-child(3), .rgw-wcell:nth-child(4) { grid-column: auto; border-left: 0; padding-left: 0; padding-right: 0; }
  .rgw-ghost.block { max-width: 70%; }
  .rgw-pause.right { justify-content: flex-start; }
  .rgw-pause.right .rgw-display, .rgw-pause.right .sub { text-align: left; margin-left: 0; }
}
@media (max-width: 640px) {
  .rgw-wcell { grid-template-columns: 1fr; gap: 14px; }
  .rgw-wcell .gn, .rgw-wcell h3, .rgw-wcell p { grid-column: 1; grid-row: auto; }
  .rgw-wcell .gn::after { width: 46px; }
  .rgw-ghost.block { max-width: 86%; }
}

/* ------------------------------------------------------------
   LEISTUNGSSEITEN — Schema der Rechtsgebiete-Seite  ·  .lg-*
   ------------------------------------------------------------ */
.lg-claim { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .04em; line-height: 1.28; font-size: clamp(19px, 2.1vw, 31px); color: #fff; max-width: 20ch; margin-top: clamp(18px, 2vw, 26px); }
.page-head .lg-claim + .ph-lead { margin-top: clamp(18px, 2vw, 24px); }
/* Karriere: „Ihre Arbeit wird gesehen." soll in einer Zeile stehen — die 20ch
   sind für die längeren Rechtsgebiete-Leitsätze gedacht. */
.lg-claim-1z { max-width: none; }

/* Leistungen — editoriale Liste, Nummer + Titel + Text */
.lg-services { padding: clamp(88px, 11vw, 160px) 0; }
.lg-services-head { max-width: 860px; }
.lg-list { margin-top: clamp(50px, 6vw, 84px); border-top: 1px solid var(--line); }
.lg-item { position: relative; display: grid; grid-template-columns: clamp(58px, 6vw, 92px) minmax(0, .92fr) minmax(0, 1.5fr); gap: 0 clamp(20px, 3vw, 52px); align-items: start; padding: clamp(30px, 3.4vw, 48px) 0; border-bottom: 1px solid var(--line); }
.lg-item::before { content: ""; position: absolute; top: 0; bottom: -1px; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--paper-2); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; z-index: 0; }
.lg-item:hover::before { opacity: 1; }
.lg-item > * { position: relative; z-index: 1; }
.lg-n { font-family: var(--f-head); font-weight: 300; font-size: clamp(26px, 2.6vw, 40px); line-height: 1; color: var(--navy); }
.lg-item h3 { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .06em; line-height: 1.32; font-size: clamp(17px, 1.6vw, 24px); color: var(--ink); }
.lg-item p { font-size: 14.5px; line-height: 1.95; color: var(--grey); max-width: 62ch; }
.lg-item p a { color: var(--navy); }

/* Argumente — 3 x 2, Ziffer als Marke */
.lg-why { padding: clamp(84px, 10vw, 150px) 0; }
.lg-why-head { max-width: 820px; }
.lg-args { --kachel-pad: clamp(22px, 2.4vw, 38px); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(46px, 5.5vw, 76px); margin-inline: calc(var(--kachel-pad) * -1); border-top: 1px solid #dcdbd7; }
.lg-arg { padding: clamp(30px, 3.2vw, 44px) var(--kachel-pad) clamp(34px, 3.6vw, 48px); border-bottom: 1px solid #dcdbd7; }
.lg-arg:not(:nth-child(3n+1)) { border-left: 1px solid #dcdbd7; padding-left: var(--kachel-pad); }
.lg-arg-n { display: block; font-family: var(--f-head); font-size: 11.5px; letter-spacing: .24em; color: var(--navy); }
.lg-arg h3 { font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .07em; line-height: 1.35; font-size: clamp(16px, 1.4vw, 21px); margin-top: 16px; }
.lg-arg p { font-size: 14px; line-height: 1.9; color: var(--grey); margin-top: 14px; }

/* FAQ: Abstand nach unten. Die Sektion hat als einzige kein eigenes Polster,
   sonst stößt die letzte Frage direkt an die Navy-Fläche der Folgesektion. */
.rgw-faq { padding-bottom: clamp(72px, 8vw, 120px); }

/* „Alle Fragen ansehen“ steht unter der Liste, nicht mehr im Kopf. */
.rgw-faq-more { margin-top: clamp(32px, 3.6vw, 48px); }

/* Weitere Gebiete: Kacheln ohne Beschreibungstext */
.lg-more-list .rgw-law h3 { margin-top: 16px; }
.lg-more-list .rgw-law-foot { padding-top: clamp(30px, 3.4vw, 44px); }
.lg-more { padding-bottom: clamp(84px, 10vw, 150px); }

@media (max-width: 1060px) {
  .lg-item { grid-template-columns: clamp(48px, 7vw, 68px) minmax(0, 1fr); row-gap: 12px; }
  .lg-item p { grid-column: 2; }
  .lg-args { grid-template-columns: repeat(2, 1fr); }
  /* Zweispaltig: nur die Trennlinie wechselt die Spalte. Der Innenabstand bleibt
     bei allen Kacheln gleich — die `3n+1`-Regel darüber zählt Dreierspalten und
     hätte hier den Kacheln 3, 5 und 9 den linken Abstand genommen. */
  .lg-arg:not(:nth-child(3n+1)) { border-left: 0; }
  .lg-arg:nth-child(even) { border-left: 1px solid #dcdbd7; }
}
@media (max-width: 640px) {
  .lg-item { grid-template-columns: 1fr; row-gap: 10px; }
  .lg-item p, .lg-item h3 { grid-column: 1; }
  .lg-args { grid-template-columns: 1fr; --kachel-pad: 16px; }
  .lg-arg, .lg-arg:nth-child(even), .lg-arg:nth-child(odd) { border-left: 0; }
}
.lg-rel { grid-column: 3; font-size: 12.5px; letter-spacing: .04em; color: var(--grey-2); margin-top: 14px; }
.lg-rel a { color: var(--navy); }
@media (max-width: 1060px) { .lg-rel { grid-column: 2; } }
@media (max-width: 640px) { .lg-rel { grid-column: 1; } }

/* ============================================================
   KARRIERE — Stellenanzeige
   Baut auf den Marken der Rechtsgebietsseiten auf (.rgw-sec, .rgw-kicker,
   .rgw-h2), ergänzt nur drei Bausteine: die Eckdaten-Zeile, die Punktlisten
   für Aufgaben/Profil/Angebot und den Anschriftenblock der Bewerbung.
   Die Listen sind bewusst keine .lg-item-Zeilen: dort gehört zu jedem Titel
   ein erklärender Absatz, hier steht je Punkt genau ein Satz.
   ============================================================ */
.kr-intro, .kr-stelle, .kr-block { padding: clamp(78px, 9.5vw, 140px) 0; }
.kr-head { max-width: 860px; }
.kr-links { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 3.2vw, 40px); }
.kr-links a { font-family: var(--f-head); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: 11px; transition: gap .4s var(--ease); }
.kr-links a::after { content: ""; width: 20px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.kr-links a:hover { gap: 15px; }
.kr-links a:hover::after { width: 30px; }

/* Eckdaten: Standort, Eintritt, Berufserfahrung */
.kr-meta { display: flex; flex-wrap: wrap; margin-top: clamp(38px, 4.4vw, 58px); border-top: 1px solid var(--line); }
.kr-meta > div { flex: 1 1 210px; padding: clamp(18px, 2vw, 26px) 0; border-bottom: 1px solid var(--line); }
.kr-meta > div + div { border-left: 1px solid var(--line); padding-left: clamp(20px, 2.6vw, 38px); }
.kr-meta .k { display: block; font-family: var(--f-head); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--navy); }
.kr-meta .v { display: block; margin-top: 11px; font-size: 15px; line-height: 1.65; color: var(--ink); }

/* Punktlisten — ein Strich als Marke, kein Aufzählungszeichen */
.kr-list { list-style: none; max-width: 88ch; margin-top: clamp(44px, 5vw, 68px); border-top: 1px solid var(--line); }
.kr-list li { position: relative; padding: clamp(17px, 1.9vw, 22px) 0 clamp(17px, 1.9vw, 22px) clamp(38px, 4vw, 58px); border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.85; color: var(--grey); transition: color .45s var(--ease); }
.kr-list li::before { content: ""; position: absolute; left: 0; top: calc(clamp(17px, 1.9vw, 22px) + .92em); width: clamp(20px, 2.2vw, 30px); height: 1px; background: var(--navy); transition: width .45s var(--ease); }
.kr-list li:hover { color: var(--ink); }
.kr-list li:hover::before { width: clamp(28px, 3vw, 42px); }
.rgw-navy .kr-list, .rgw-ink .kr-list { border-top-color: rgba(255,255,255,.22); }
.rgw-navy .kr-list li, .rgw-ink .kr-list li { color: rgba(255,255,255,.8); border-bottom-color: rgba(255,255,255,.22); }
.rgw-navy .kr-list li::before, .rgw-ink .kr-list li::before { background: #a9bcec; }
.rgw-navy .kr-list li:hover, .rgw-ink .kr-list li:hover { color: #fff; }

/* Bewerbung: Anschrift neben den Schaltflächen */
.kr-apply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); align-items: start; }
.kr-adr { font-style: normal; font-size: 15px; line-height: 2; color: rgba(255,255,255,.62); }
.kr-adr strong { display: block; font-family: var(--f-head); font-weight: 300; text-transform: uppercase; letter-spacing: .09em; font-size: 15px; color: #fff; margin-bottom: 8px; }
.kr-adr a { color: rgba(255,255,255,.86); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); transition: color .4s var(--ease), border-color .4s var(--ease); }
.kr-adr a:hover { color: #fff; border-bottom-color: #fff; }
.kr-bewerbung .rgw-display { max-width: 14ch; }

@media (max-width: 860px) {
  .kr-apply { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kr-meta > div + div { border-left: 0; padding-left: 0; }
  .kr-list li { padding-left: 30px; }
  .kr-list li::before { width: 18px; }
}

/* ============================================================
   RECHTSSCHUTZ-AUFTRITT (rechtsschutz.corelaw.de)
   Eigene Bausteine der B2C-Seiten. Alles Übrige — Seitenkopf,
   Kacheln, Ablaufspur, Abschlussblock — kommt unverändert aus
   dem Bestand, damit beide Auftritte gleich aussehen.
   ============================================================ */

/* Vertikaler Abstand. `.rgw-sec` selbst bringt keinen mit — im Bestand
   deklariert ihn jede Abschnitts-Variante einzeln (.rgw-help, .rgw-flow,
   .kr-intro …). Die neuen Abschnitte folgen demselben Maß wie die Karriereseite. */
.rs-intro,
.rs-deckung,
.rs-frist,
.rs-unterlagen,
.rs-ablehnung,
.rs-kosten { padding: clamp(78px, 9.5vw, 140px) 0; }

/* Der Fristen-Abschnitt traegt seine Farbe seit 1.44.0 selbst und laeuft
   deshalb ueber die volle Fensterbreite. Die Innenluft, die vorher im Panel
   sass, kommt jetzt von hier — sonst klebte der Text an der Farbkante. */
.rs-frist {
  background: var(--navy);
  padding: clamp(88px, 10vw, 150px) 0;
}

/* Begriffs-Kacheln: gleiche Optik wie „Typische Fälle“, aber Erklärungen ohne
   Verweisziel — deshalb normaler Cursor und kein Hover-Versprechen. */
/* Erklaerkacheln: kein Link, also kein Klick-Versprechen (kein Cursor, keine
   Navy-Kante). Die Flaeche wird beim Hovern weiss — auf dem hellgrauen Grund
   der Sektion ist das sichtbar, waehrend der Bestandswert --paper-2 dort
   unsichtbar bliebe, weil er genau die Hintergrundfarbe ist. */
.rs-begriffe .rgw-case { cursor: default; }
.rs-begriffe .rgw-case:hover { background: var(--paper); }
.rs-begriffe .rgw-case:hover::after { transform: scaleX(0); }

/* Kacheln erscheinen nacheinander, sobald die Sektion in den Blick kommt.
   Der Beobachter setzt .in je Kachel; die Verzoegerung staffelt sie.
   Bewusst auf .rs-cases beschraenkt — die Rechtsgebietsseiten von corelaw.de
   nutzen dieselben Kacheln und sollen sich nicht mitveraendern. */
/* Kopf des Abschnitts: Vorspann und Ueberschrift stehen links untereinander,
   der Absatz rechts daneben. Im Bestand von corelaw.de fuellt der Kicker die
   linke, die Ueberschrift die rechte Spalte — die Ueberschrift landete damit auf
   der rechten Seite, obwohl der Blick sie zuerst sucht. Das Markup ist
   unveraendert (die drei Kinder liegen in derselben Reihenfolge), nur ihre
   Plaetze im Raster sind gesetzt. Bewusst auf .rs-cases beschraenkt, damit die
   Rechtsgebietsseiten von corelaw.de bleiben, wie sie sind. */
.rs-cases .rgw-help-head .rgw-kicker { grid-column: 1; grid-row: 1; }
.rs-cases .rgw-help-head .rgw-h2 { grid-column: 1; grid-row: 2; }
.rs-cases .rgw-help-head p { grid-column: 2; grid-row: 2; align-self: end; }
@media (max-width: 900px) {
  .rs-cases .rgw-help-head .rgw-kicker,
  .rs-cases .rgw-help-head .rgw-h2,
  .rs-cases .rgw-help-head p { grid-column: 1; grid-row: auto; }
}

.rs-cases .rgw-case:nth-child(1) { transition-delay: 0s; }
.rs-cases .rgw-case:nth-child(2) { transition-delay: .09s; }
.rs-cases .rgw-case:nth-child(3) { transition-delay: .18s; }
.rs-cases .rgw-case:nth-child(4) { transition-delay: .27s; }
.rs-cases .rgw-case:nth-child(5) { transition-delay: .36s; }
.rs-cases .rgw-case:nth-child(6) { transition-delay: .45s; }

/* Die Sektion liegt auf hellgrauem Grund, die Kachel wird beim Hovern weiss.
   Der Bestandswert --paper-2 waere hier genau die Hintergrundfarbe, der Hover
   also unsichtbar. */
.rs-cases .rgw-case:hover { background: var(--paper); }
/* Kein Schatten beim Hovern. Auf dem hellgrauen Grund dieser Abschnitte traegt
   schon der Wechsel auf Weiss die Rueckmeldung; der Schatten aus dem Bestand
   liess die Kacheln zusaetzlich abheben und wirkte neben den flaechigen
   Abschnitten dieses Auftritts wie ein Fremdkoerper. Das leichte Anheben
   bleibt. Nur .rs-cases — corelaw.de behaelt seinen Schatten. */
.rs-cases .rgw-case:hover { box-shadow: none; }

/* --- Kopfbild der Startseite -------------------------------------------------
   Das Motiv zeigt einen Bildschirm mit gut lesbarem Text. Der Schleier des
   Bestands verläuft waagerecht — links dunkel für die Textspalte, rechts fast
   klar für das Motiv. Auf schmalen Geräten steht die Überschrift aber über der
   ganzen Breite und damit mitten im Bildschirmtext; zwei Texte übereinander
   liest niemand. Deshalb dort ein gleichmäßigerer Schleier, und zwar nur für
   diese eine Seite — die Kopfbilder von corelaw.de bleiben unberührt. */
/* Die sichtbare Kopfzeile: groß, luftig, und begrenzt auf wenige Wörter je
   Zeile — sie ist das Einzige, was im Kopf große Schrift trägt. */
.rs-hero .rs-hero-display {
  color: #fff;
  max-width: none;   /* Umbrueche setzt <br> im Text, nicht die Spaltenbreite */
  margin-top: var(--kicker-gap);
  font-size: clamp(34px, 5.4vw, 68px);
}
.rs-hero .ph-lead { margin-top: clamp(28px, 3vw, 40px); max-width: 54ch; }

/* Kopfbild-Zoom: Der Bestandswert (8 % in 24 s) ist so zurückhaltend, dass man
   ihn kaum bemerkt. Hier etwas mehr Weg in etwas weniger Zeit, weiterhin ruhig.
   Der Startwert liegt bei 1.03, damit an keiner Kante ein Rand aufblitzt. */
@keyframes rsHeroZoom { from { transform: scale(1.03); } to { transform: scale(1.13); } }
.rs-hero .bg { animation: rsHeroZoom 22s var(--ease) infinite alternate; }

/* Schreibmaschine: Der Cursor steht nur, solange getippt wird, und verschwindet
   danach. Ein dauerhaft blinkender Balken lenkt vom Lesen ab. */
@keyframes rsCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.rs-hero-display.is-typing::after {
  content: "";
  display: inline-block;
  width: .05em;
  height: .78em;
  margin-left: .1em;
  vertical-align: -.04em;
  background: currentColor;
  animation: rsCaret .9s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .rs-hero .bg { animation: none; transform: scale(1.03); }
  .rs-hero-display.is-typing::after { animation: none; opacity: 0; }
}

/* Das Motiv zeigt links einen Bildschirm mit lesbarem Text. Der Ausschnitt
   rückt ihn nach rechts aus der Textspalte heraus, der Verlauf hält die linke
   Seite zusätzlich ruhig. Sonst liest man zwei Texte übereinander. */
.rs-hero-schirm .bg { background-position: 68% 55%; }
.rs-hero.page-head.img::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.58) 38%, rgba(0,0,0,.22) 68%, rgba(0,0,0,.05) 100%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.46));
}

@media (max-width: 780px) {
  /* Auf schmalen Geraeten umbricht der Text ohnehin; die gesetzten <br>
     kommen zusaetzlich, das bleibt lesbar. */
  .rs-hero-schirm .bg { background-position: 62% 55%; }
  .rs-hero.page-head.img::after {
    background:
      linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.54) 60%, rgba(0,0,0,.46) 100%),
      linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.50));
  }
}

/* --- Fristen-Kasten -------------------------------------------------------
   Der wichtigste Baustein der Detailseiten: Wer eine Kündigung oder einen
   Bußgeldbescheid im Briefkasten hat, muss die Frist sehen, ohne zu lesen.
   Deshalb abgesetzte Fläche, Navy-Kante und größere Schrift als im Fließtext. */
/* Fristen-Panel: der einzige dunkle Block in der Seitenmitte. Kopf links,
   Text rechts, damit die Ueberschrift nicht als Zeile ueber einer Karte
   verhungert. */
/* Seit 1.44.0 ist das Panel nur noch das Raster: Farbe und Flaechenrand
   liegen an der Sektion, damit das Blau bis an beide Fensterkanten reicht.
   Der Inhalt bleibt in der Textspalte, weil `.wrap` ihn dort haelt. */
.rs-frist-panel {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 70px);
}
/* Weiss auf Navy traegt weniger weit als Weiss auf Schwarz — die
   zurueckgenommenen Toene deshalb eine Spur kraeftiger als vorher. */
.rs-frist-panel .rgw-kicker { color: rgba(255,255,255,.66); }
.rs-frist-panel .rgw-kicker::before { background: rgba(255,255,255,.5); }
/* Lange Komposita wie „Bussgeldbescheid" passen nicht in die schmale Spalte.
   Automatische Silbentrennung statt eines Bruchs mitten im Wort. */
.rs-frist-panel .rgw-h2 { color: #fff; hyphens: auto; overflow-wrap: break-word; }
.rs-frist-text p { font-size: 16px; line-height: 1.95; color: rgba(255,255,255,.82); }
.rs-frist-text p + p { margin-top: 18px; }
.rs-frist-text strong { color: #fff; font-weight: 600; }
.rs-frist-panel .rs-frist-note {
  margin-top: clamp(24px, 2.6vw, 34px);
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid rgba(255,255,255,.22);
  font-style: italic;
  font-size: 15px !important;
  color: rgba(255,255,255,.62) !important;
}
@media (max-width: 900px) { .rs-frist-panel { grid-template-columns: 1fr; } }

/* Leitgedanke: weniger Luft als im Bestand und hellgrau abgesetzt, sonst
   entsteht mitten auf der Seite ein leeres weisses Feld. */
.rs-pause { background: var(--paper-2); padding: clamp(64px, 7vw, 104px) 0; }

.rs-frist-head { max-width: 720px; }
.rs-frist-box {
  margin-top: clamp(32px, 3.4vw, 48px);
  max-width: 780px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  padding: clamp(28px, 3.4vw, 46px) clamp(26px, 3.4vw, 48px);
}
.rs-frist-box p { font-size: 16px; line-height: 1.95; color: var(--grey); }
.rs-frist-box p + p { margin-top: 18px; }
.rs-frist-box strong { color: var(--ink); font-weight: 600; }
.rs-frist-note {
  margin-top: clamp(24px, 2.6vw, 34px);
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--line);
  font-style: italic;
  font-size: 15px !important;
  color: var(--grey-2) !important;
}

/* --- Unterlagen-Liste und Kosten-Hinweis --------------------------------- */
.rs-unterlagen-liste { max-width: 68ch; }
.rs-unterlagen-liste strong { color: var(--ink); font-weight: 600; }
.rs-unterlagen-note,
.rs-kosten-note {
  margin-top: clamp(22px, 2.4vw, 30px);
  font-size: 15px;
  line-height: 1.9;
  color: var(--grey-2);
  font-style: italic;
  max-width: 62ch;
}

/* --- Team auf der Startseite ---------------------------------------------
   Dieselben Karten wie im Karussell auf corelaw.de, aber als festes Raster:
   Bei drei Personen gäbe es nichts zu blättern. */
.rs-team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 46px);
}
/* Die drei Karten erscheinen nacheinander, sobald die Sektion in den Blick
   kommt — gleiche Staffelung wie bei den Kacheln. */
.rs-team .member:nth-child(1) { transition-delay: 0s; }
.rs-team .member:nth-child(2) { transition-delay: .11s; }
.rs-team .member:nth-child(3) { transition-delay: .22s; }

.rs-team-mail { margin-top: 14px !important; }
.rs-team-mail a {
  font-family: var(--f-head);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--grey-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.rs-team-mail a:hover { color: var(--navy); border-bottom-color: var(--navy); }
@media (max-width: 900px) { .rs-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rs-team { grid-template-columns: 1fr; } }

/* --- Ansprechpartner im Abschlussblock (dunkler Grund) -------------------
   Steht nur, wenn ein Name eingetragen ist — siehe inc/sections/rs-detail/07.php. */
.rs-person {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(22px, 2.6vw, 34px);
  align-items: center;
  max-width: 620px;
  margin: 0 0 clamp(38px, 4.4vw, 56px);
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(255,255,255,.16);
}
.rs-person-foto { aspect-ratio: 3/3.7; overflow: hidden; background: rgba(255,255,255,.06); }
.rs-person-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-person-body h3 {
  font-family: var(--f-head); font-weight: 300; text-transform: uppercase;
  letter-spacing: .06em; font-size: 19px; color: #fff; margin-bottom: 10px;
}
.rs-person-rolle {
  font-family: var(--f-head); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.rs-person-kontakt { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.rs-person-kontakt a {
  font-size: 14.5px; color: rgba(255,255,255,.86); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.3);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.rs-person-kontakt a:hover { color: #fff; border-bottom-color: #fff; }
.rs-kontakt .kr-adr { margin-bottom: clamp(30px, 3.4vw, 44px); }
@media (max-width: 560px) {
  .rs-person { grid-template-columns: 1fr; max-width: 340px; }
  .rs-person-foto { max-width: 160px; }
}

/* ---------- Beispielfall im Bildband der Rechtsschutz-Startseite (1.46.0) ----
   Das Band war bis dahin ein reines Bild: ein Mandant mit einem Schreiben in
   der Hand. Der Kasten sagt, worum es in dieser Situation geht — und ist
   deshalb bewusst kein zarter Verlauf, sondern eine gesetzte Flaeche. Weiss auf
   dem Foto, nicht Navy: Der Auftritt setzt seine eine Farbe sparsam ein, und
   das Fristenband der Detailseiten soll die einzige grosse Navy-Flaeche
   bleiben. Ein weisses Blatt vor der Aufnahme nimmt ausserdem das Motiv auf —
   der Mandant haelt eines in der Hand.

   Er sitzt links unten, weil der Mandant im Bild in der Mitte sitzt: rechts
   waere die Anwaeltin verdeckt, mittig sein Gesicht. Links liegt nur der
   unscharfe Aktenschrank.

   Die Breite haengt am Fenster, nicht an einem festen Wert. Das Bild fuellt das
   Band immer ganz aus, der Kopf des Mandanten liegt also bei jeder Fenster-
   breite an derselben Stelle — bei knapp 29 Prozent. Ein fester Kasten von
   430px reicht bei 1600px Breite bis 32 Prozent und streift die Schlaefe; bei
   1280px reichte er bis 39 und lag mitten im Gesicht. Mit `27vw` endet er
   immer bei denselben 32 Prozent. */
.rs-fall {
  position: absolute; z-index: 2;
  left: var(--pad); bottom: clamp(22px, 3vw, 46px);
  width: clamp(300px, 27vw, 430px);
  max-width: calc(100% - 2 * var(--pad));
  background: var(--paper);
  padding: clamp(22px, 2.3vw, 32px) clamp(24px, 2.5vw, 36px);
  /* Ohne Schatten schwebt eine weisse Flaeche auf einem Foto nicht, sie klebt.
     Dasselbe Mass wie bei den Hero-Karten auf corelaw.de, nur etwas tiefer,
     weil hier ein Bild und keine Seitenfarbe darunter liegt. */
  box-shadow: 0 14px 38px rgba(10, 10, 10, .26);
}
.rs-fall-h {
  font-family: var(--f-head); font-weight: 300; text-transform: uppercase;
  letter-spacing: .06em; line-height: 1.3;
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--ink); margin: clamp(15px, 1.5vw, 20px) 0 0;
  hyphens: auto; overflow-wrap: break-word;
}
.rs-fall-t { font-size: 15px; line-height: 1.8; color: var(--grey); margin: 14px 0 0; }
.rs-fall-note {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-style: italic; font-size: 13px; color: var(--grey-2);
}

/* Auf der Kontaktseite steht das Formular auf weissem Grund neben den
   Kanzlei-Eckdaten — dort waere die weisse Kachel mit Schatten eine Karte ohne
   Kontrast. Die Huelle faellt weg, das Formular selbst bleibt identisch; statt
   von rechts kommt es wie alles auf dieser Seite von unten (die Vorgabe von
   `.rv` gilt wieder, weil der translateX-Wert zurueckgesetzt ist). */
.rs-kontakt-seite .rs-fallform { background: transparent; box-shadow: none; padding: 0; }
.rs-kontakt-seite .rs-fallform.rv { transform: translateY(26px); transition-delay: 0s; }
.rs-kontakt-seite .rs-fallform.rv.in { transform: none; }

/* Der Kasten kommt von links herein, sobald das Band in den Blick geraet: die
   Bewegung folgt der Leserichtung und dem Blick des Mandanten im Bild, der nach
   links unten auf sein Schreiben sieht. Getragen wird sie von `.rv` — dieselbe
   Mechanik wie ueberall im Theme (IntersectionObserver in app.js setzt `.in`),
   nur die Richtung ist eine andere als das uebliche Heraufgleiten. Die kleine
   Verzoegerung laesst dem Band den Vortritt, sonst bewegen sich beide zugleich.
   Ohne JavaScript bleibt der Kasten sichtbar: `.rv` ohne `.in` versteckt ihn
   zwar, aber das gilt fuer jeden Baustein der Seite gleichermassen. */
.rs-fall.rv { transform: translateX(-52px); transition-delay: .12s; }
.rs-fall.rv.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rs-fall.rv { transform: none; transition: opacity .3s linear; }
}

/* Auf der Arbeitsrechtsseite steht der Mann links und der Brief in der Mitte —
   dort waere der Kasten im Weg. Er wechselt die Seite und kommt entsprechend
   von rechts herein, damit Bewegung und Standort zusammenpassen. */
.rs-fall-rechts { left: auto; right: var(--pad); }
.rs-fall-rechts.rv { transform: translateX(52px); }
.rs-fall-rechts.rv.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rs-fall-rechts.rv { transform: none; }
}

/* Schmales Fenster: Unterhalb von 1000px bliebe vom Kasten entweder eine sehr
   schmale Spalte oder er deckte das halbe Bild zu — beides schlechter als das
   Naheliegende. Er rueckt deshalb unter das Bild, dessen Hoehe das ::before
   haelt. Der Hintergrund bleibt am Band, der Kasten deckt ihn ab. */
@media (max-width: 1000px) {
  .rs-band-fall { height: auto; }
  .rs-band-fall::before { content: ""; display: block; height: clamp(230px, 60vw, 330px); }
  .rs-fall { position: static; max-width: none; box-shadow: none; }
  .rs-fall-rechts { right: auto; }
}

/* ---------- „Fall schildern“ im Kontakt-Abschnitt der Startseite (1.47.0) ----
   Der Abschluss der Seite war eine Telefonnummer und eine mailto-Adresse. Das
   passt fuer den Anteil der Besucher, der ohnehin anruft — aber nicht fuer den,
   der abends liest und am Handy kein Mailprogramm oeffnen will. Links bleibt
   deshalb alles, was da war, rechts steht das Formular.

   Die Kachel ist weiss und damit die einzige helle Flaeche im dunklen Abschluss.
   Das ist Absicht: Sie soll das Letzte sein, was auf dieser Seite ins Auge
   faellt. Dieselbe Kachel wie im Bildband, nur von der anderen Seite herein —
   die eine erzaehlt einen Fall, die andere nimmt einen entgegen. */
.rs-kontakt-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(420px, 48%, 620px));
  gap: clamp(40px, 5vw, 84px);
  align-items: start;
}
.rs-fallform {
  background: var(--paper);
  padding: clamp(26px, 2.6vw, 38px) clamp(24px, 2.5vw, 36px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .34);
}
.rs-fallform-h {
  font-family: var(--f-head); font-weight: 300; text-transform: uppercase;
  letter-spacing: .06em; line-height: 1.3;
  font-size: clamp(19px, 1.7vw, 25px);
  color: var(--ink); margin: 0;
}
/* `.rgw-end p` faerbt jeden Absatz dieses Abschnitts weiss und gibt ihm den
   Abstand des Abschluss-Textes. In der weissen Kachel waere das unsichtbarer
   Text mit zuviel Luft — deshalb hier zurueckgesetzt, bevor die eigenen Masse
   folgen. */
.rs-kontakt .rs-fallform p { color: var(--grey); max-width: none; margin: 0; }
.rs-kontakt .rs-fallform p.rs-fallform-t { font-size: 14.5px; line-height: 1.75; margin: 14px 0 clamp(26px, 2.6vw, 34px); }
.rs-fallform .cform { gap: 18px; }
.rs-fallform .cform label .opt { text-transform: none; font-weight: 400; color: var(--grey-2); }
.rs-fallform .k-form-foot { margin-top: 6px; }
.rs-kontakt .rs-fallform p.rs-fallform-note {
  margin-top: clamp(18px, 1.8vw, 24px); padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.7; color: var(--grey-2);
}
/* Der Ghost-Schriftzug liegt hinter dem ganzen Abschnitt; ohne Stapelkontext
   schoebe er sich unter Umstaenden ueber die weisse Kachel. */
.rs-kontakt-split > * { position: relative; z-index: 1; }

/* Die Rufnummer als Schaltflaeche. `.btn` bringt 11px Versalien mit — richtig
   fuer eine Beschriftung, zu klein fuer eine Nummer, die man antippen soll.
   Deshalb hier eine Spur groesser und mit Hoerer davor. */
.rs-kontakt .rs-tel-btn { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .1em; padding: 15px 30px; }
.rs-kontakt .rs-tel-btn .ic { display: inline-flex; }
.rs-kontakt .rs-tel-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Von rechts herein — Gegenstueck zum Beispielfall im Bildband, der von links
   kommt. Getragen von derselben `.rv`-Mechanik (app.js setzt `.in`). */
.rs-fallform.rv { transform: translateX(52px); transition-delay: .12s; }
.rs-fallform.rv.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rs-fallform.rv { transform: none; transition: opacity .3s linear; }
}

/* Untereinander, sobald die Textspalte des Formulars zu schmal wuerde. Das
   Formular steht dann unter dem Anruf — die Reihenfolge bleibt also dieselbe. */
@media (max-width: 1000px) {
  .rs-kontakt-split { grid-template-columns: 1fr; gap: clamp(44px, 7vw, 64px); }
}