/* ================================================================
   RK Legal Theme — Komponenten-Styles.
   1:1 übernommen aus design_handoff_rk_website/design/startseite-v3/
   (index.html + examensanfechtung.html <style>-Blöcke).
   Tokens liegen in tokens.css — Werte hier nicht hart kodieren.
   ================================================================ */

/* overflow-x: clip statt hidden — hidden macht <body> zum Scroll-Container
   und bricht position: sticky des Headers (Bug bis v3). */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; }
img { max-width: 100%; display: block; }
[id] { scroll-margin-top: 96px; } /* Anker-Ziele nicht unterm Sticky-Header */

.wrap { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { .wrap { padding: 0 var(--gutter-lg); } }

/* Mehr Ruhe/Weißraum: großzügigerer Rhythmus */
section { padding: calc(var(--section-rhythm) * 1.15) 0; }

/* ---------- Flächen ---------- */
.s-white { background: var(--surface-default); }
.s-mist  { background: var(--surface-mist); }
.s-dark  { background: var(--surface-dark); color: var(--text-on-dark); }
.s-deep  { background: var(--surface-dark-deep); color: var(--text-on-dark); }
.s-dark h1, .s-dark h2, .s-dark h3, .s-deep h2, .s-deep h3 { color: var(--text-on-dark); }

/* ---------- Eyebrow: türkis hinterlegt, nicht türkise Schrift ---------- */
.eyebrow {
  display: inline-block;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--rk-ink);
  background: var(--accent-backing);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.s-dark .eyebrow, .s-deep .eyebrow { color: var(--text-on-dark-signal); background: var(--rk-turquoise-veil); }
.eyebrow.terra { color: var(--rk-terracotta-ink); background: var(--terra-wash); }

p.lead { font-size: var(--text-lead); color: var(--text-muted); max-width: var(--measure); }
.s-dark p.lead, .s-deep p.lead { color: var(--text-on-dark-muted); }

/* ---------- Buttons: die zwei bestätigten Varianten ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-target);
  padding: 15px 30px;
  border-radius: var(--radius-button);
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: 16px;
  text-decoration: none;
  border: var(--border-width-strong) solid transparent;
  transition: var(--transition-default);
}
.btn:hover { transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-hover); text-decoration: none; }
.btn-primary { background: var(--accent-fill); color: var(--accent-on-fill); }
.btn-ghost { background: transparent; color: var(--rk-turquoise); border-color: var(--rk-turquoise); }
.btn-ghost:hover { background: var(--rk-turquoise); color: var(--rk-ink); border-color: transparent; }
/* Auf hellen Flächen: Schrift in Ink (Hannes #56 „zu schwer lesbar"), Rahmen türkis, Hover füllt türkis */
.s-white .btn-ghost, .s-mist .btn-ghost, .hero .btn-ghost { color: var(--rk-ink); border-color: var(--rk-turquoise-deep); }
.s-white .btn-ghost:hover, .s-mist .btn-ghost:hover, .hero .btn-ghost:hover { background: var(--rk-turquoise); color: var(--rk-ink); border-color: transparent; }

/* Türkis hinterlegter Textlink („Mehr") */
.more {
  display: inline-block; font-weight: var(--weight-semibold); font-size: 15px;
  color: var(--rk-ink); background: var(--accent-backing);
  padding: 9px 16px; border-radius: var(--radius-pill); text-decoration: none;
  min-height: var(--tap-target); line-height: 26px; transition: var(--transition-default);
}
.more:hover { background: var(--rk-turquoise); text-decoration: none; }
.s-dark .more { color: var(--rk-turquoise); background: var(--rk-turquoise-veil); }
.s-dark .more:hover { background: var(--rk-turquoise); color: var(--rk-ink); }

/* ---------- Header: hell (v4), sticky, mit Dropdown ----------
   Feedback #19 („wirkt insgesamt dunkel"): Sand-Grund mit Blur, Logo
   positiv, Links in Ink; Dropdown als helle Karte. */
header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-width) solid var(--border-default);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; }
.nav .logo img { height: 54px; width: auto; }
.nav-list { display: flex; gap: var(--space-4); list-style: none; align-items: center; margin: 0; padding: 0; }
.nav-list > li { position: relative; }
.nav-list a, .nav-list button {
  display: flex; align-items: center; gap: 6px; min-height: var(--tap-target);
  font-family: var(--font-text); font-size: 15px; font-weight: var(--weight-medium);
  color: var(--text-body); text-decoration: none;
  background: none; border: none; cursor: pointer; transition: var(--transition-default);
}
.nav-list a:hover, .nav-list button:hover { color: var(--rk-turquoise-ink); text-decoration: none; }

.has-menu > .menu {
  position: absolute; top: 100%; left: 0; min-width: 290px;
  background: var(--surface-default); border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card); box-shadow: 0 18px 44px rgba(16, 24, 32, .14);
  padding: var(--space-2); list-style: none; margin: 0; display: none;
}
.has-menu:hover > .menu, .has-menu:focus-within > .menu { display: block; }
.menu a { padding: 11px 14px; border-radius: var(--radius-button); font-size: 14.5px; }
.menu a:hover { background: var(--accent-backing); color: var(--rk-ink); }

.burger { display: none; width: var(--tap-target); height: var(--tap-target); flex-direction: column; gap: 5px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }
.burger span { width: 24px; height: 2px; background: var(--rk-ink); border-radius: 2px; }
.drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.drawer[data-open="true"] { display: flex; }
.drawer .scrim { flex: 1; background: rgba(16,24,32,.45); }
.drawer aside {
  width: min(86vw, 380px); background: var(--surface-default);
  border-left: var(--border-width) solid var(--border-default); box-shadow: var(--shadow-drawer);
  padding: var(--space-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2);
}
.drawer a, .drawer summary {
  color: var(--text-body); text-decoration: none; font-size: 17px; font-weight: var(--weight-medium);
  min-height: var(--tap-target); display: flex; align-items: center;
}
.drawer details ul { list-style: none; margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--rk-turquoise-deep); }
.drawer details ul a { font-size: 15px; }
.drawer .close { align-self: flex-end; width: var(--tap-target); height: var(--tap-target); background: none; border: none; color: var(--rk-ink); font-size: 22px; cursor: pointer; }
@media (max-width: 960px) { .nav-list { display: none; } .burger { display: flex; } }

/* ---------- Hero v4: hell, zweispaltig, Foto im runden Rahmen ----------
   Feedback #19 (zu dunkel) + #48 (Bild). Kein dunkler Vollflächen-Grund
   mehr: Sand mit Türkis-Lichtfleck oben rechts und Terracotta-Hauch unten
   links; Copy links, Foto rechts in --radius-box mit Türkis-Fläche dahinter.
   Headline-Akzent = Marker (Türkis als Fläche, nicht als Schrift). */
.hero { position: relative; overflow: hidden; background: var(--surface-hero); padding: calc(var(--space-6) * .8) 0 var(--space-6); }
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 62vw; height: 62vw; max-width: 780px; max-height: 780px; right: -20vw; top: -26vw; border-radius: 50%;
  background: radial-gradient(circle at center, var(--rk-turquoise-glow) 0%, rgba(24,199,212,.08) 42%, transparent 68%);
}
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 40vw; height: 40vw; max-width: 480px; max-height: 480px; left: -16vw; bottom: -22vw; border-radius: 50%;
  background: radial-gradient(circle at center, var(--terra-wash) 0%, transparent 68%);
}
/* Hannes #59: Bild größer — gleich breite Spalten, Hero-Wrap etwas breiter als der Content.
   Hannes #55: Eyebrow als eigene Zeile über beiden Spalten; darunter stehen H1 und Bild
   oben auf einer Höhe (align-items: start). */
.hero .wrap {
  position: relative; z-index: 2; width: 100%; max-width: 1280px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  column-gap: var(--space-5); row-gap: var(--space-4); align-items: start;
}
.hero .eyebrow { grid-column: 1 / -1; display: block; width: 100%; text-align: center; line-height: 1.6; margin-bottom: 0; }
.hero-copy { max-width: 620px; }
.hero h1 { margin-top: 0; }
.hero h1 em {
  font-style: normal; color: var(--rk-ink); padding: 0 .06em;
  background: linear-gradient(transparent 60%, var(--rk-turquoise) 60%, var(--rk-turquoise) 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero p.lead { margin: var(--space-4) 0; }
.cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.hero .note { font-size: 14px; color: var(--text-meta); margin-top: var(--space-3); }
.hero-visual { position: relative; }
.hero-visual::before {
  content: ""; position: absolute; z-index: 0; inset: 9% -5% -7% 11%;
  border-radius: var(--radius-box); background: var(--rk-turquoise-wash); transform: rotate(-3deg);
}
.hero-visual .frame-img {
  position: relative; z-index: 1; aspect-ratio: 4 / 4.4; max-height: 76vh; min-height: 360px;
  border-radius: var(--radius-box); overflow: hidden; background: var(--surface-mist);
  box-shadow: 0 26px 60px rgba(16, 24, 32, .16);
}
.hero-visual .frame-img img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; }
/* Zuschnitte aus hero-image.py: Desktop quadratisch (beide Personen komplett), mobil 4:3 */
.hero-visual .frame-img.has-crops { aspect-ratio: 1 / 1; }
.hero-visual .frame-img.has-crops img { object-position: center; }
@media (max-width: 960px) { .hero-visual .frame-img.has-crops { aspect-ratio: 4 / 3; } }
.hero-badge {
  position: absolute; z-index: 2; left: -16px; bottom: 30px;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-default); border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card); padding: 12px 16px; box-shadow: var(--shadow-card);
}
.hero-badge b { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 24px; line-height: 1; color: var(--rk-ink); white-space: nowrap; }
.hero-badge .star { color: var(--rk-star); font-size: 20px; }
.hero-badge span:not(.star) { font-size: 13px; color: var(--text-muted); line-height: 1.3; max-width: 16ch; }
@media (max-width: 960px) {
  .hero { padding: var(--space-5) 0; }
  .hero .wrap { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .hero .eyebrow { grid-column: auto; }
  .hero-visual { max-width: 560px; }
  .hero-visual .frame-img { aspect-ratio: 4 / 3; min-height: 0; }
  .hero-visual .frame-img img { object-position: 72% 24%; }
}
@media (max-width: 680px) {
  .hero { padding: var(--space-4) 0 var(--space-5); }
  .hero-copy { max-width: none; }
  .hero .eyebrow { font-size: 10px; padding: 5px 12px; margin-bottom: var(--space-2, 10px); letter-spacing: .14em; }
  .hero h1 { font-size: 30px; margin-bottom: var(--space-2, 10px); }
  .hero p.lead { font-size: 15.5px; }
  .hero .cta-row { margin-top: var(--space-3, 16px); gap: 10px; }
  .hero .btn { padding: 12px 24px; font-size: 14px; }
  .hero .note { font-size: 13px; margin-top: var(--space-2, 12px); }
  .hero-visual { max-width: none; }
  .hero-visual .frame-img { aspect-ratio: 4 / 3.2; }
  .hero-badge { left: 12px; bottom: 12px; padding: 10px 12px; }
  .hero-badge b { font-size: 20px; }
}

/* Hannes #58: einzeilig — vier gleich breite Spalten statt umbrechender Flex-Zeile */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-4) var(--gutter); background: var(--surface-dark-card); position: relative; z-index: 2; max-width: var(--content-width); margin: 0 auto; }
@media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi b { display: block; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 36px; line-height: 1; color: var(--text-on-dark-signal); }
.kpi span { font-size: 14px; color: var(--text-on-dark-muted); }

/* ---------- Bekannt aus ---------- */
.press { padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--border-default); }
.press .wrap { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; } /* Hannes #57: zentriert */
.press .hint { text-align: center; }
/* Startseite: laufendes Band (Scroll-Rhythmus Stufe 1) */
.press--marquee .wrap { flex-wrap: nowrap; justify-content: flex-start; }
.press--marquee .label { flex-shrink: 0; }
.marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: rk-marquee 52s linear infinite; }
.marquee-group { display: flex; gap: var(--space-5); padding-right: var(--space-5); white-space: nowrap; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes rk-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: auto; }
  .marquee-group[aria-hidden] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-group { flex-wrap: wrap; white-space: normal; gap: var(--space-3) var(--space-4); }
}
.press .label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); font-weight: var(--weight-semibold); }
.press .medium { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 17px; color: var(--text-muted); }
.press .hint { flex-basis: 100%; font-size: 13px; color: var(--text-meta); }

/* ---------- Rechtsgebiete: „Kachel-Bühne" v4 ----------
   Feedback #22 (Christian): „zentraler und größer, mit Icons". Acht
   zentrierte Kacheln (4 × 2) mit Icon-Scheibe in Türkis-Wash, Label
   darunter; das Detail-Panel öffnet sich in voller Breite UNTER dem
   Raster (statt rechts daneben). Headline/Lead zentriert. */
#saeulen { padding: calc(var(--section-rhythm) * 1.5) 0; text-align: center; }
#saeulen h2 { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.08; letter-spacing: var(--tracking-display); max-width: 18ch; margin: 0 auto; }
#saeulen p.lead { font-size: 21px; max-width: 56ch; margin: var(--space-3) auto 0; }
.areas-layout { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--surface-default); border: 2px solid var(--border-default);
  border-radius: var(--radius-box); padding: 26px 16px 24px; min-height: 178px;
  font-family: var(--font-display); font-size: 19px; font-weight: var(--weight-semibold); line-height: 1.2;
  color: var(--text-heading); cursor: pointer; transition: var(--transition-default);
  text-align: center; width: 100%;
}
.tile .ico { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-backing); display: grid; place-items: center; transition: var(--transition-default); flex-shrink: 0; }
.tile svg { width: 36px; height: 36px; stroke: var(--rk-turquoise-ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile .tile-label { max-width: 14ch; }
.tile:hover { border-color: var(--rk-turquoise); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.tile:hover .ico { background: var(--rk-turquoise); }
.tile:hover svg { stroke: var(--rk-ink); }
.tile:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.tile[aria-expanded="true"] { background: var(--rk-turquoise); border-color: var(--rk-turquoise); color: var(--rk-ink); box-shadow: var(--shadow-card); }
.tile[aria-expanded="true"] .ico { background: rgba(16, 24, 32, .12); }
.tile[aria-expanded="true"] svg { stroke: var(--rk-ink); }
#area-panels { display: flex; justify-content: center; text-align: left; }
.side-panel {
  background: var(--surface-dark-card); color: var(--text-on-dark);
  border: var(--border-width-strong) solid var(--rk-turquoise-line);
  border-radius: var(--radius-box); padding: var(--space-5) var(--space-6);
  display: none; width: 100%; max-width: 980px; flex-direction: column; justify-content: center;
}
.side-panel.open { display: flex; animation: rk-reveal-up var(--duration-reveal) var(--ease-out) both; }
.side-panel h3 { font-size: 30px; line-height: 1.15; color: var(--text-on-dark); margin-bottom: var(--space-3); }
.side-panel p { color: var(--text-on-dark-muted); font-size: 18px; line-height: var(--leading-body); margin-bottom: var(--space-4); max-width: 60ch; }
.side-panel .more { align-self: flex-start; color: var(--rk-turquoise); background: var(--rk-turquoise-veil); font-size: 16px; }
.side-panel .more:hover { background: var(--rk-turquoise); color: var(--rk-ink); }
.side-panel .placeholder { font-size: 13px; color: var(--text-on-dark-meta); border-top: var(--border-width) solid var(--border-on-dark); padding-top: var(--space-3); margin-top: var(--space-2); }
@media (max-width: 1024px) {
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .tile { font-size: 17px; min-height: 160px; padding: 22px 14px 20px; }
  .tile .ico { width: 64px; height: 64px; } .tile svg { width: 32px; height: 32px; }
  .side-panel h3 { font-size: 27px; }
}
@media (max-width: 760px) {
  .areas-layout { gap: var(--space-4); margin-top: var(--space-5); }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { min-height: 132px; padding: 18px 10px 16px; font-size: 15.5px; gap: 10px; }
  .tile .ico { width: 54px; height: 54px; } .tile svg { width: 28px; height: 28px; }
  .side-panel { padding: var(--space-4); }
  .side-panel h3 { font-size: 24px; }
  .side-panel p { font-size: 16px; }
  #saeulen p.lead { font-size: 18px; }
}

/* ---------- Erfolge: Intro links (sticky), Karten rechts als Welle ----------
   Scroll-Rhythmus Stufe 1: jede zweite Karte 64 px tiefer, Intro von links,
   Karten gestaffelt von rechts. */
.cases-layout { display: grid; grid-template-columns: minmax(280px, .85fr) 1.15fr; gap: var(--space-6); align-items: start; }
.cases-intro { position: sticky; top: 120px; }
.cases-intro .slider-hint { margin-top: var(--space-4); max-width: 40ch; }
.cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; } /* Karten je Reihe gleich hoch (Hannes: „unrund") */
.slide {
  display: flex; flex-direction: column;
  background: var(--surface-dark-card); border: var(--border-width) solid var(--rk-turquoise-line);
  border-radius: var(--radius-card); padding: var(--space-4);
}
.slide .more { margin-top: auto; align-self: flex-start; }
@media (max-width: 960px) { .cases-layout { grid-template-columns: 1fr; gap: var(--space-5); } .cases-intro { position: static; } }
@media (max-width: 640px) { .cases-grid { grid-template-columns: 1fr; } }
.slide .tag { display: inline-block; font-size: 12px; font-weight: var(--weight-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-on-dark-signal); margin-bottom: var(--space-3); }
.slide h3 { font-size: 18px; margin-bottom: var(--space-2); }
.slide p { font-size: 14.5px; color: var(--text-on-dark-muted); line-height: var(--leading-tight); margin-bottom: var(--space-3); }
.slider-hint { font-size: 13px; color: var(--text-on-dark-meta); }

/* ---------- Team: Flip-Cards (v4, Feedback #21) ----------
   Vorderseite Foto + Kurzprofil, Rückseite Vita als dunkle Karte. Beide
   Seiten liegen im selben Grid-Feld (Höhe = größere Seite), Drehung per
   rotateY; bei prefers-reduced-motion ohne Übergang. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); align-items: stretch; }
.person { perspective: 1600px; display: grid; } /* Karte füllt die Zeile → beide Karten gleich hoch */
.person .flip { position: relative; display: grid; transform-style: preserve-3d; transition: transform .7s var(--ease-out); }
.person.is-flipped .flip { transform: rotateY(180deg); }
.person .face {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-box);
  overflow: hidden; background: var(--surface-default); display: flex; flex-direction: column;
}
.person .face-back {
  transform: rotateY(180deg); padding: var(--space-4);
  background: var(--surface-dark-card); color: var(--text-on-dark); border-color: var(--rk-turquoise-line);
}
.person .foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-mist); } /* Hochformat: Einzelporträts aus dem Hero-Foto (team-portraits.py) */
.person .foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .6s var(--ease-out); }
.person:not(.is-flipped) .foto:hover img { transform: scale(1.03); }
.person .info { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; }
.person .role { color: var(--rk-turquoise-ink); font-weight: var(--weight-semibold); font-size: 14px; margin: var(--space-1) 0 var(--space-2); }
.person p { font-size: 14.5px; color: var(--text-body); line-height: var(--leading-tight); }
.flip-btn {
  margin-top: var(--space-3); align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 14px; border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-default); background: var(--surface-mist); color: var(--rk-ink);
  font-family: var(--font-text); font-size: 14px; font-weight: var(--weight-semibold); cursor: pointer; transition: var(--transition-default);
}
.flip-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flip-btn:hover { background: var(--rk-turquoise); border-color: transparent; }
.face-front .info .flip-btn { margin-top: auto; padding-top: 8px; }
.face-front .info p { margin-bottom: var(--space-3); }
.face-back h3 { color: var(--text-on-dark); }
.face-back .role { color: var(--rk-turquoise); }
.face-back p, .face-back .person-quote { color: var(--text-on-dark-muted); }
.vita { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.vita li { position: relative; padding-left: 22px; margin-bottom: 9px; font-size: 14px; color: var(--text-on-dark-muted); line-height: 1.45; }
.vita li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 2px; background: var(--rk-turquoise); }
.back-actions { margin-top: auto; padding-top: var(--space-3); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: space-between; }
.back-actions .more { color: var(--rk-turquoise); background: var(--rk-turquoise-veil); font-size: 14.5px; }
.back-actions .more:hover { background: var(--rk-turquoise); color: var(--rk-ink); }
.face-back .flip-btn { margin-top: 0; background: transparent; border-color: var(--rk-turquoise-line); color: var(--rk-turquoise); }
.face-back .flip-btn:hover { background: var(--rk-turquoise); color: var(--rk-ink); }
.team-more { margin-top: var(--space-4); }
@media (prefers-reduced-motion: reduce) { .person .flip { transition: none; } .person .foto img { transition: none; } }

/* ---------- Team-Seite (page-team.php) ---------- */
.team-page .member { display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: var(--space-5); align-items: start; padding: var(--space-5) 0; border-top: var(--border-width) solid var(--border-default); }
.team-page .member:first-child { border-top: 0; padding-top: 0; }
.team-page .member:nth-child(even) .member-photo { order: 2; }
.member-photo { position: sticky; top: 110px; aspect-ratio: 4 / 5; border-radius: var(--radius-box); overflow: hidden; background: var(--surface-mist); }
.member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.member-body h2 { font-size: clamp(26px, 3vw, 36px); }
.member-body .role { color: var(--rk-turquoise-ink); font-weight: var(--weight-semibold); margin: 6px 0 var(--space-3); }
.member-body p { font-size: 16.5px; line-height: var(--leading-body); max-width: 62ch; margin-bottom: var(--space-3); }
.member-body h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-meta); margin: var(--space-4) 0 var(--space-2); }
.member-body .vita li { color: var(--text-body); font-size: 15.5px; }
.member-body .vita li::before { background: var(--rk-turquoise-deep); }
@media (max-width: 800px) {
  .team-page .member { grid-template-columns: 1fr; gap: var(--space-4); }
  .member-photo { position: static; max-width: 360px; aspect-ratio: 4 / 5; }
  .team-page .member:nth-child(even) .member-photo { order: 0; }
}

/* ---------- Bewertungen ---------- */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); align-items: stretch; }
.review { display: flex; flex-direction: column; }
.review .src { margin-top: auto; padding-top: var(--space-3); }
.review { background: var(--surface-default); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-4); }
.rating { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.rating .stars { color: var(--rk-star); font-size: 18px; letter-spacing: 2px; }
.rating .value { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 14px; color: var(--text-body); }
.review p { font-size: 15px; color: var(--text-muted); font-style: italic; line-height: var(--leading-tight); }
.review .src { margin-top: var(--space-3); font-size: 13px; color: var(--text-meta); font-style: normal; }
/* anwalt.de-Widget (Zwei-Klick, template-parts/blocks/anwaltde-widget.php) */
.anwde { margin-top: var(--space-5); max-width: 650px; margin-inline: auto; }
.anwde-consent { padding: var(--space-4); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-default); }
.anwde-title { font-weight: 600; color: var(--text-heading); }
.anwde-rating { white-space: nowrap; margin-left: .35em; color: var(--text-muted); font-weight: 400; }
.anwde-note { margin-top: var(--space-2); font-size: 13.5px; color: var(--text-muted); line-height: var(--leading-tight); }
.anwde-actions { margin-top: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.anwde-profile { font-size: 14px; }
.anwde.is-loaded .anwde-consent { display: none; }
.anwde.is-error .anwde-note::after { content: " Das Laden hat nicht geklappt – bitte später erneut versuchen oder das Profil direkt öffnen."; color: var(--text-heading); }
.widget-slot { margin-top: var(--space-4); padding: var(--space-4); border: 1px dashed var(--border-default); border-radius: var(--radius-card); background: var(--surface-default); font-size: 13.5px; color: var(--text-muted); line-height: var(--leading-tight); }

/* ---------- B2B ---------- */
/* Scroll-Rhythmus: gespiegelt zum Hero — Karte links, Text rechts */
.b2b-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-5); align-items: center; }
.b2b-inner > .b2b-copy { order: 2; }
.b2b-inner ul { list-style: none; margin: var(--space-4) 0; padding: 0; }
.b2b-inner li { padding-left: 28px; position: relative; margin-bottom: var(--space-2); color: var(--text-on-dark-muted); font-size: 15.5px; }
.b2b-inner li::before { content: ""; position: absolute; left: 0; top: 11px; width: 14px; height: 2.5px; background: var(--rk-turquoise); }
.frame { border: var(--border-width-strong) solid var(--rk-turquoise-line); border-radius: var(--radius-box); padding: var(--space-4); background: var(--surface-dark-card); }
.frame p { color: var(--text-on-dark-muted); font-size: 14.5px; margin-top: var(--space-2); line-height: var(--leading-tight); }
@media (max-width: 860px) { .b2b-inner { grid-template-columns: 1fr; } .b2b-inner > .b2b-copy { order: 0; } }

/* ---------- Kontakt: Anfrageformular + Terminbuchung/Karte ----------
   v4 hell (Feedback #46 „Braunton"): weiße Karten auf Nebel-Fläche, helle
   Felder. Die dunkle Variante bleibt für .s-dark/.s-deep verfügbar. */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: stretch; margin-top: var(--space-5); }
.contact-card { background: var(--surface-default); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-box); padding: var(--space-5); display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.contact-card h3 { font-size: 20px; margin-bottom: var(--space-2); }
.contact-card > p { color: var(--text-muted); font-size: 15px; margin-bottom: var(--space-4); line-height: var(--leading-tight); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.field label { font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-heading); }
.field input, .field textarea {
  font-family: var(--font-text); font-size: 15px; color: var(--text-body);
  background: var(--surface-default); border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-button); padding: 12px 14px; min-height: var(--tap-target); transition: var(--transition-default);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-meta); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--rk-turquoise); outline-offset: 2px; border-color: var(--rk-turquoise-deep); }
.booking-embed { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-3); border: 1px dashed var(--border-default); border-radius: var(--radius-card); background: var(--surface-mist); padding: var(--space-5); min-height: 200px; color: var(--text-muted); font-size: 14px; line-height: var(--leading-tight); }
.map-slot { margin-top: var(--space-4); border: 1px dashed var(--border-default); border-radius: var(--radius-card); background: var(--surface-mist); min-height: 150px; display: flex; align-items: center; justify-content: center; color: var(--text-meta); font-size: 13px; text-align: center; padding: var(--space-3); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
/* dunkle Variante (falls eine Kontakt-Sektion wieder auf Dunkel liegt) */
.s-dark .contact-card, .s-deep .contact-card { background: var(--surface-dark-card); border-color: var(--rk-turquoise-line); box-shadow: none; }
.s-dark .contact-card > p, .s-deep .contact-card > p { color: var(--text-on-dark-muted); }
.s-dark .field label, .s-deep .field label { color: var(--text-on-dark); }
.s-dark .field input, .s-dark .field textarea, .s-dark .field select,
.s-deep .field input, .s-deep .field textarea, .s-deep .field select { color: var(--text-on-dark); background: var(--surface-dark); border-color: var(--border-on-dark); }
.s-dark .booking-embed, .s-dark .map-slot, .s-deep .booking-embed, .s-deep .map-slot { background: var(--surface-dark); border-color: var(--border-on-dark); color: var(--text-on-dark-muted); }

/* ---------- Tablet-Breakpoint (bis 1024px) ---------- */
@media (max-width: 1024px) {
  .hero { min-height: clamp(480px, 64vh, 640px); }
  section { padding: var(--section-rhythm) 0; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .kpis { gap: var(--space-4); }
}
@media (max-width: 640px) {
  .team-grid, .review-grid { grid-template-columns: 1fr; }
  .kpi b { font-size: 30px; }
}

/* ---------- Footer ---------- */
footer {
  background: var(--surface-dark-deep); color: var(--text-on-dark-muted);
  padding: var(--space-6) 0 var(--space-4);
}
footer h4 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 15px; color: var(--text-on-dark); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: .08em; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 8px; }
footer a { color: var(--text-on-dark-muted); text-decoration: none; font-size: 14px; transition: var(--transition-default); }
footer a:hover { color: var(--rk-turquoise); }
footer img { height: 48px; width: auto; margin-bottom: var(--space-3); }
.cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-5); padding-bottom: var(--space-5); border-bottom: var(--border-width) solid var(--border-on-dark); }
.legal { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-4); font-size: 13px; color: var(--text-on-dark-meta); }
.legal a { color: var(--text-on-dark-meta); }
.legal a:hover { color: var(--rk-turquoise); }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cols { grid-template-columns: 1fr; } }


/* ---------- Alternierendes, gestaffeltes Einfliegen ----------
   Inhalte stehen vollständig im HTML; die Klassen werden erst per JS
   gesetzt (SEO/KI-SEO sicher) und bei prefers-reduced-motion gar nicht. */
/* v4: deutlicher (Feedback #45 „Textboxen sollen einfliegen"): größerer
   Versatz, längere Dauer, Staffelung 110 ms (main.js). */
.reveal-armed { opacity: 0; transition: opacity var(--duration-reveal-long) var(--ease-out), transform var(--duration-reveal-long) var(--ease-out); will-change: opacity, transform; }
.reveal-armed.from-left  { transform: translateX(calc(var(--reveal-offset) * -1)); }
.reveal-armed.from-right { transform: translateX(var(--reveal-offset)); }
.reveal-armed.from-up    { transform: translateY(calc(var(--reveal-offset) * .75)); }
.reveal-armed.reveal-in  { opacity: 1; transform: none; }
/* Mobil ruhiger: alles von unten, halber Weg */
@media (max-width: 760px) {
  .reveal-armed.from-left, .reveal-armed.from-right, .reveal-armed.from-up { transform: translateY(calc(var(--reveal-offset) * .5)); }
}

/* ---------- Unterseite: Seiten-Hero (v4 hell, wie Startseiten-Hero) ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--surface-hero); color: var(--text-body); padding: var(--space-6) 0 var(--space-5); }
.page-hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 56vw; height: 56vw; max-width: 720px; max-height: 720px; right: -18vw; top: -30vw; border-radius: 50%;
  background: radial-gradient(circle at center, var(--rk-turquoise-glow) 0%, rgba(24,199,212,.07) 42%, transparent 68%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: var(--text-heading); max-width: 22ch; }
.page-hero p.lead { color: var(--text-muted); }
.page-hero .btn-ghost { color: var(--rk-ink); border-color: var(--rk-turquoise-deep); }
.page-hero .btn-ghost:hover { background: var(--rk-turquoise); color: var(--rk-ink); border-color: transparent; }
.breadcrumbs { font-size: 13px; color: var(--text-meta); margin-bottom: var(--space-3); }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--rk-turquoise-ink); }
.intro-grid { display: grid; grid-template-columns: 1.5fr .8fr; gap: var(--space-6); align-items: start; }
.intro-copy h3 { font-size: 21px; margin: var(--space-4) 0 var(--space-2); }
.intro-copy p { font-size: 16px; line-height: var(--leading-body); color: var(--text-body); margin-bottom: var(--space-3); max-width: 68ch; }
.rk-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; max-width: 62ch; }
.rk-list li { padding-left: 26px; position: relative; margin-bottom: 10px; font-size: 15.5px; color: var(--text-body); line-height: var(--leading-tight); }
.rk-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 13px; height: 2.5px; background: var(--rk-turquoise-deep); }
.intro-aside { position: sticky; top: 96px; background: var(--surface-mist); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-box); padding: var(--space-4); }
.intro-aside h3 { font-size: 17px; margin-bottom: var(--space-2); }
.intro-aside p { font-size: 14px; color: var(--text-muted); line-height: var(--leading-tight); margin-bottom: var(--space-3); }
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } .intro-aside { position: static; } }

.chapter { border: var(--border-width) solid var(--border-default); border-radius: var(--radius-card); background: var(--surface-default); margin-bottom: 14px; overflow: hidden; }
.chapter summary { list-style: none; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); cursor: pointer; transition: var(--transition-default); }
.chapter summary::-webkit-details-marker { display: none; }
.chapter summary:hover { background: var(--surface-mist); }
.chapter summary:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
.ch-num { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 15px; color: var(--rk-turquoise-ink); padding-top: 3px; }
.ch-head { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ch-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 19px; color: var(--text-heading); line-height: 1.3; }
.ch-teaser { font-size: 14.5px; color: var(--text-muted); line-height: var(--leading-tight); max-width: 72ch; }
.ch-marker { font-family: var(--font-display); font-size: 24px; color: var(--rk-turquoise-ink); line-height: 1; padding-top: 2px; transition: var(--transition-default); }
.chapter[open] .ch-marker { transform: rotate(45deg); }
.chapter[open] .ch-teaser { display: none; }
.ch-body { padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 34px); }
.ch-body h3 { font-size: 18px; margin: var(--space-3) 0 var(--space-2); }
.ch-body p { font-size: 15.5px; line-height: var(--leading-body); color: var(--text-body); margin-bottom: var(--space-2); max-width: 70ch; }
@media (max-width: 560px) { .ch-body { padding-left: var(--space-4); } }

.media-note { font-size: 13.5px; color: var(--text-meta); margin-top: var(--space-3); max-width: 70ch; }

/* ---------- Rechtsgebiets-Seiten (generisches Template) ---------- */
.intro-copy h2 { font-size: 26px; line-height: var(--leading-heading); margin: var(--space-5) 0 var(--space-2); }
.intro-copy > h2:first-child, .rg-copy > h2:first-child { margin-top: 0; }
.rg-copy h2.rg-section { padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--border-default); }
.aside-links { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border-default); }
.aside-links h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-meta); margin-bottom: var(--space-2); }
.aside-links a { display: block; font-size: 14.5px; font-weight: var(--weight-semibold); color: var(--rk-turquoise-ink); text-decoration: none; padding: 6px 0; }
.aside-links a:hover { text-decoration: underline; }

/* ---------- Unterseite: Zahlen-Band unterm Hero ---------- */
.exa-stats { background: var(--surface-mist); border-bottom: var(--border-width) solid var(--border-default); padding: var(--space-4) 0 var(--space-3); }
.exa-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.stat { background: var(--surface-default); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); }
.stat b { display: block; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 26px; line-height: 1.15; color: var(--rk-turquoise-ink); margin-bottom: 4px; }
.stat span { font-size: 13.5px; color: var(--text-muted); line-height: var(--leading-tight); }
.stats-note { font-size: 12.5px; color: var(--text-meta); margin-top: var(--space-2); }
@media (max-width: 900px) { .exa-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .exa-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .stat b { font-size: 20px; } .stat { padding: 12px 14px; } }

/* ---------- Unterseite: Ablauf-Schritte (Kapitel 03) ---------- */
.ch-body h3.step-h { padding-left: 16px; border-left: 3px solid var(--rk-turquoise); }

/* ---------- Unterseite: CTA am Kapitel-Ende ---------- */
.ch-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  background: var(--surface-mist); border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); margin-top: var(--space-4);
}
.ch-cta p { margin: 0; font-size: 15px; font-weight: var(--weight-semibold); color: var(--text-heading); }
.ch-cta .btn { padding: 12px 22px; font-size: 14.5px; }

/* ---------- Unterseite: Formular-Ergänzungen ---------- */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.field select {
  font-family: var(--font-text); font-size: 15px; color: var(--text-body);
  background: var(--surface-default); border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-button); padding: 12px 14px; min-height: var(--tap-target);
  transition: var(--transition-default); appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23726A5B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field select:focus { outline: 2px solid var(--rk-turquoise); outline-offset: 2px; border-color: var(--rk-turquoise-deep); }
.form-note { font-size: 12.5px; color: var(--text-meta); line-height: var(--leading-tight); margin-top: var(--space-3); max-width: 60ch; }
.form-note a { color: var(--text-muted); text-decoration: underline; }
.contact-card form .btn { margin-top: var(--space-2); }
.dark-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.dark-list li { padding-left: 28px; position: relative; margin-bottom: var(--space-3); color: var(--text-body); font-size: 15px; line-height: var(--leading-tight); }
.dark-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 14px; height: 2.5px; background: var(--rk-turquoise-deep); }
.dark-list strong { color: var(--text-heading); font-weight: var(--weight-semibold); }
.contact-side-note { margin-top: auto; padding-top: var(--space-3); border-top: var(--border-width) solid var(--border-default); font-size: 14px; color: var(--text-muted); }
.s-dark .form-note, .s-deep .form-note { color: var(--text-on-dark-meta); }
.s-dark .dark-list li, .s-deep .dark-list li { color: var(--text-on-dark-muted); }
.s-dark .dark-list strong, .s-deep .dark-list strong { color: var(--text-on-dark); }
.s-dark .contact-side-note, .s-deep .contact-side-note { border-color: var(--border-on-dark); color: var(--text-on-dark-muted); }

/* ================================================================
   WordPress-Ergänzungen (nicht Teil des Handoffs):
   Skip-Link, Formular-Statusmeldungen, Fallback-Inhaltsseiten.
   ================================================================ */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); word-wrap: normal;
}
.skip-link:focus {
  clip: auto; clip-path: none; width: auto; height: auto;
  position: fixed; top: 8px; left: 8px; z-index: 100;
  background: var(--rk-turquoise); color: var(--rk-ink);
  padding: 12px 20px; border-radius: var(--radius-button);
  font-weight: var(--weight-semibold); text-decoration: none;
}
.form-msg { border-radius: var(--radius-box); border: var(--border-width) solid; padding: 14px 16px; font-size: 14.5px; line-height: var(--leading-tight); margin-bottom: var(--space-3); }
.form-msg--success { border-color: var(--rk-success); color: var(--text-body); background: rgba(46, 139, 87, .12); }
.form-msg--error { border-color: var(--rk-error); color: var(--text-body); background: rgba(192, 57, 43, .10); }
.field .req { color: var(--text-meta); font-weight: var(--weight-body); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.page-content { max-width: var(--measure); }
.page-content > * + * { margin-top: var(--space-3); }
.page-content h2, .page-content h3 { margin-top: var(--space-4); }
.page-content ul, .page-content ol { padding-left: 1.2em; }

.person-quote {
  margin-top: var(--space-3);
  padding-left: var(--space-3);
  border-left: 3px solid var(--rk-turquoise);
  font-style: italic;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}
.person-quote:empty { display: none; }

/* ================================================================
   v4 — Feedback-Runde 1 (2026-09-10)
   ================================================================ */

/* Examens-LP: Bundesländer-Akkordeon (#47) — kompakte Boxen im 2er-Raster.
   Flex statt Grid: die offene Box nimmt die ganze Zeile, eine davor allein
   stehende Box wächst mit (keine Lücken, auch wenn der Examen-Schalter
   Boxen ausfiltert). ::after hält die letzte Box bei ungerader Zahl schmal. */
.bl-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.bl-grid::after { content: ""; flex: 1 1 calc(50% - 7px); }
.bl-grid .chapter { flex: 1 1 calc(50% - 7px); min-width: 0; margin-bottom: 0; overflow: clip; } /* clip statt hidden: Sticky-Aside bleibt möglich */
.bl-grid .chapter[open] { flex-basis: 100%; }
.chapter.bl summary { padding: 16px var(--space-4); align-items: center; }
.chapter.bl .ch-title { font-size: 17px; }
.chapter.bl .ch-body { padding: var(--space-2) var(--space-4) var(--space-4); }
.bl-placeholder { font-size: 14px; color: var(--text-meta); font-style: italic; }

/* Offene Box: Text + klebende CTA-Spalte */
.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); align-items: start; }
.bl-aside { position: sticky; top: 104px; background: var(--surface-mist); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-card); padding: var(--space-4); }
.bl-aside h4 { font-size: 17px; margin: 0 0 var(--space-2); }
.ch-body .bl-aside p { font-size: 14.5px; line-height: var(--leading-tight); color: var(--text-muted); margin-bottom: var(--space-3); text-align: left; hyphens: manual; }
.bl-aside .btn { width: 100%; padding: 12px 18px; font-size: 14.5px; }
.ch-body h4.bl-title { font-size: 21px; line-height: 1.25; margin: 0 0 var(--space-3); max-width: 46ch; text-wrap: balance; }
.ch-body h5 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 17px; line-height: 1.3; color: var(--text-heading); margin: var(--space-4) 0 var(--space-2); max-width: 60ch; }
.ch-body h4.bl-title + h5 { margin-top: 0; font-size: 16px; color: var(--rk-turquoise-ink); }
.bl-panel + .bl-panel { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-width) solid var(--border-default); } /* nur ohne JS untereinander */

/* Examen-Schalter (Erstes | Zweites Staatsexamen). Erst mit JS aktiv
   (data-examen an der Sektion) — ohne JS stehen beide Texte untereinander. */
.bl-switch { display: none; gap: 4px; padding: 4px; margin-bottom: var(--space-4); border-radius: var(--radius-pill); background: var(--surface-mist); border: var(--border-width) solid var(--border-default); }
.bl-sec[data-examen] .bl-switch { display: inline-flex; }
.bl-switch-btn { min-height: 40px; padding: 8px 20px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font: inherit; font-size: 14.5px; font-weight: var(--weight-semibold); cursor: pointer; transition: var(--transition-default); }
.bl-switch-btn:hover { color: var(--rk-ink); }
.bl-switch-btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.bl-switch-btn.is-active { background: var(--rk-turquoise); color: var(--rk-ink); }
.bl-switch--sm { margin-bottom: var(--space-3); }
.bl-switch.bl-switch--static { display: inline-flex; }
.bl-switch--static .bl-switch-btn { cursor: default; }
.bl-switch--sm .bl-switch-btn { min-height: 34px; padding: 5px 14px; font-size: 13.5px; }
.bl-sec[data-examen="1"] [data-panel="2"], .bl-sec[data-examen="2"] [data-panel="1"],
.bl-sec[data-examen="1"] .bl:not([data-has~="1"]), .bl-sec[data-examen="2"] .bl:not([data-has~="2"]) { display: none; }
.bl-sec[data-examen] .bl-panel + .bl-panel { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 900px) {
  .bl-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .bl-aside { position: static; }
}
@media (max-width: 760px) {
  .bl-grid { gap: 10px; }
  .bl-grid .chapter, .bl-grid::after { flex-basis: 100%; }
}
@media (max-width: 420px) {
  .bl-switch { width: 100%; }
  .bl-sec[data-examen] .bl-switch { display: flex; }
  .bl-switch-btn { flex: 1; padding-left: 8px; padding-right: 8px; font-size: 13.5px; }
}

/* Rechtsgebiets-Seiten ohne Kundentext (Studienplatzklage, Ärztliches
   Berufsrecht): Hinweis-Box nur in der Review-Phase (Feedback-Overlay an). */
.rg-placeholder {
  margin: var(--space-4) 0; padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--terra-line); border-radius: var(--radius-card); background: var(--terra-wash);
  font-size: 14.5px; color: var(--rk-terracotta-ink); line-height: var(--leading-tight); max-width: 62ch;
}
.rg-placeholder strong { display: block; margin-bottom: 4px; }

/* B2B-Modul: Button + „Mehr"-Link nebeneinander */
.b2b-inner .cta-row { margin-top: var(--space-2); }

/* Generierte Listen: verlinkte Prüfungsarten (#39) */
.rk-list a { color: var(--rk-turquoise-ink); text-decoration: underline; text-decoration-color: var(--rk-turquoise-line); text-underline-offset: 3px; }
.rk-list a:hover { text-decoration-color: currentColor; }

/* ================================================================
   v4.2 — Feedback-Runde 2 (Anna, 10.09.2026): Textseiten ohne Textwände,
   helle Flächen statt Braun, Kleinkram. Doku: website/design-konzept-v4-
   feedbackrunde-1.md §2.10.
   ================================================================ */

/* Kapitelfrage ist jetzt ein echtes <h2> (SEO) — Optik wie bisher */
.chapter h2.ch-title { font-size: 19px; line-height: 1.3; letter-spacing: 0; margin: 0; font-weight: var(--weight-display); }

/* „Kurz gesagt" — Kurzantwort vor dem Langtext */
.ch-summary { background: var(--accent-backing); border-left: 3px solid var(--rk-turquoise); border-radius: var(--radius-button); padding: 14px 18px; margin: var(--space-2) 0 var(--space-4); max-width: 70ch; }
.ch-summary-label { display: block; font-size: 12px; font-weight: var(--weight-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-turquoise-ink); margin-bottom: 4px; }
.ch-summary p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text-body); max-width: none; }
/* Absatz "Bitte ergaenzen" (Luecken, die die Anwaelte fuellen; danach loeschen) */
p.rk-todo { background: #fff6d6; border-left: 3px solid #e0b420; border-radius: var(--radius-button); padding: 12px 16px; font-size: 14.5px; color: #5a4a10; max-width: 70ch; }

/* Chips: kurze Stichwort-Listen */
.rk-chips { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 74ch; }
.rk-chips li { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--surface-default); border: 1px solid var(--border-default); font-size: 14.5px; line-height: 1.3; color: var(--text-body); }
.rk-chips li a { color: var(--rk-turquoise-ink); font-weight: var(--weight-semibold); text-decoration: none; }
.rk-chips li a:hover { text-decoration: underline; }

/* Check-Karten: mittellange Listen als zweispaltige Boxen */
.rk-checks { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 78ch; }
.rk-checks li { position: relative; padding: 12px 14px 12px 42px; border-radius: var(--radius-card); background: var(--surface-mist); border: 1px solid var(--border-default); font-size: 15px; line-height: 1.45; color: var(--text-body); }
.s-mist .rk-checks li { background: var(--surface-default); }
.rk-checks li::before { content: ""; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; border-radius: 50%; background: var(--rk-turquoise); }
.rk-checks li::after { content: ""; position: absolute; left: 19px; top: 17px; width: 8px; height: 5px; border-left: 2px solid var(--rk-ink); border-bottom: 2px solid var(--rk-ink); transform: rotate(-45deg); }
@media (max-width: 640px) { .rk-checks { grid-template-columns: 1fr; } }

/* Stepper: „Schritt n:"-Abschnitte als nummerierte Timeline */
.steps { list-style: none; margin: var(--space-3) 0 var(--space-4); padding: 0; counter-reset: step; max-width: 72ch; }
.steps .step { position: relative; padding: 0 0 var(--space-4) 56px; counter-increment: step; }
.steps .step::before { content: counter(step); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--rk-turquoise); color: var(--rk-ink); font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 16px; display: grid; place-items: center; }
.steps .step::after { content: ""; position: absolute; left: 18px; top: 44px; bottom: 6px; width: 2px; background: var(--rk-turquoise-line); }
.steps .step:last-child::after { display: none; }
.steps .step h3.step-h { padding-left: 0; border-left: 0; margin: 7px 0 var(--space-2); }

/* Inhaltsverzeichnis neben dem Akkordeon */
.chapters-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.toc { position: sticky; top: 110px; }
.toc-title { font-size: 12px; font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--text-meta); margin-bottom: var(--space-2); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border-default); }
.toc li a { display: block; padding: 8px 0 8px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--text-muted); text-decoration: none; transition: var(--transition-default); }
.toc li a:hover { color: var(--text-heading); text-decoration: none; }
.toc li a.is-active { border-left-color: var(--rk-turquoise); color: var(--text-heading); font-weight: var(--weight-semibold); }
.toc .toc-num { color: var(--rk-turquoise-ink); font-family: var(--font-display); margin-right: 6px; }
@media (max-width: 1023px) { .chapters-layout { grid-template-columns: 1fr; } .toc { display: none; } }

/* Helle Flächen statt Braun (Anna #60/#61): Zahlen-Band, Erfolge, Hochschulen, Kachel-Panel */
.kpis-band { background: var(--surface-hero); border-top: var(--border-width) solid var(--border-default); border-bottom: var(--border-width) solid var(--border-default); }
.kpis { background: transparent; }
.kpi b { color: var(--rk-turquoise-ink); }
.kpi span { color: var(--text-muted); }
.s-mist .slide { background: var(--surface-default); border-color: var(--border-default); }
.s-mist .slide .tag { color: var(--rk-turquoise-ink); }
.s-mist .slide h3 { color: var(--text-heading); }
.s-mist .slide p { color: var(--text-muted); }
.s-mist .slider-hint { color: var(--text-meta); }
.s-white .b2b-inner li { color: var(--text-body); }
.s-white .b2b-inner li::before { background: var(--rk-turquoise-deep); }
.s-white .frame { background: var(--surface-mist); border-color: var(--rk-turquoise-line); }
.s-white .frame p { color: var(--text-muted); }
.side-panel { background: var(--surface-mist); color: var(--text-body); border-color: var(--rk-turquoise); }
.side-panel h3 { color: var(--text-heading); }
.side-panel p { color: var(--text-muted); }
.side-panel .more { color: var(--rk-ink); background: var(--accent-backing); }
.side-panel .more:hover { background: var(--rk-turquoise); color: var(--rk-ink); }


/* Mitgliedschaften (Anna #74/#75) */
.memberships { font-size: 13px; color: var(--text-meta); margin: -4px 0 10px; line-height: 1.4; }
.face-back .memberships { color: var(--text-on-dark-meta); margin: 0 0 var(--space-2); }

/* ---------- Datenschutz-Cluster (generate-datenschutz.py, 15.09.2026) ---------- */
/* Gruppen-Label zwischen Kapiteln (Überschrift ohne eigenen Text im docx) */
.chapters .ch-group { font-size: 13px; font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--text-meta); margin: var(--space-4) 0 var(--space-2); }
.chapters .ch-group:first-child { margin-top: 0; }
/* „Mehr dazu"-Link am Kapitelende */
.rg-more { margin: var(--space-2) 0 0; }
.rg-more a { font-weight: var(--weight-semibold); color: var(--rk-turquoise-ink); text-decoration: none; }
.rg-more a:hover { text-decoration: underline; }
/* Unterseiten-Karten auf der Cluster-Übersicht */
.sub-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.sub-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface-default); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-box); color: var(--text-body); text-decoration: none; transition: var(--transition-default); }
.sub-card:hover { border-color: var(--rk-turquoise); transform: translateY(-3px); box-shadow: var(--shadow-card); text-decoration: none; }
.sub-card h3 { font-size: 21px; color: var(--text-heading); }
.sub-card p { font-size: 15px; color: var(--text-muted); line-height: var(--leading-tight); flex: 1; }
.sub-card .more { align-self: flex-start; }
@media (max-width: 760px) { .sub-cards { grid-template-columns: 1fr; } }
/* FAQ-Akkordeon: Fragezeichen statt Nummer, Frage als h3 */
.faq-list { margin-top: var(--space-4); }
.chapter.faq .ch-num { font-size: 18px; }
.chapter h3.ch-title { font-size: 18px; line-height: 1.3; margin: 0; font-weight: var(--weight-display); }
.chapter.faq .ch-body { padding-top: 0; }
/* FAQ innerhalb eines Kapitels (Datenschutz & IT-Recht: Unterseiten-FAQs) */
.chapter h4.ch-title { font-size: 16.5px; line-height: 1.3; margin: 0; font-weight: var(--weight-display); }
.ch-faq { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border-default); }
.ch-faq > h3 { margin-bottom: var(--space-2); }
.ch-faq .chapter { background: var(--surface-mist); }
.ch-body h4 { font-size: 16px; margin: var(--space-3) 0 var(--space-1); }

/* ---------- Blocksatz für Fließtext (Wunsch der Anwälte, 15.09.2026) ----------
   Gilt für alle Textseiten (Intro, Kapitel, Kurz gesagt, Team, generische
   Seiten), nicht für Leads, Karten, Listen, Hero und Footer. Mit deutscher
   Silbentrennung (lang="de-DE" im <html>), damit keine Löcher entstehen;
   letzte Zeile linksbündig; unter 720 px linksbündig (schmale Spalten). */
@media (min-width: 720px) {
  .intro-copy p, .ch-body p, .ch-summary p, .page-content p, .member-body p, .rg-copy p {
    text-align: justify; text-align-last: left;
    hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4;
  }
}

/* ================================================================
   Blog „News & Wissen" (15.09.2026): Übersicht, Einzelbeitrag,
   Startseiten-Teaser. Karten mit Beitragsbild oder Icon-Platzhalter in
   der Türkis-Wash-Optik der Rechtsgebiets-Kacheln. PHP: inc/blog.php,
   index.php, single.php, template-parts/post-card.php, module-news.php.
   ================================================================ */

/* Dritte helle Fläche (Sand vom Hero) — für den Teaser zwischen B2B (weiß) und Kontakt (Nebel) */
.s-sand { background: var(--surface-hero); border-top: var(--border-width) solid var(--border-default); border-bottom: var(--border-width) solid var(--border-default); }

/* Beitragsbild oder Icon-Platzhalter */
.post-media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-mist); border-radius: var(--radius-card); }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.post-media.is-placeholder { display: grid; place-items: center; background: linear-gradient(135deg, var(--surface-hero) 0%, var(--surface-mist) 100%); }
.post-media.is-placeholder::before {
  content: ""; position: absolute; width: 72%; aspect-ratio: 1; right: -24%; top: -34%; border-radius: 50%;
  background: radial-gradient(circle at center, var(--rk-turquoise-glow) 0%, rgba(24,199,212,.06) 48%, transparent 70%);
}
.post-media.is-placeholder::after {
  content: ""; position: absolute; width: 52%; aspect-ratio: 1; left: -20%; bottom: -34%; border-radius: 50%;
  background: radial-gradient(circle at center, var(--terra-wash) 0%, transparent 68%);
}
.post-media .ico { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 50%; background: var(--accent-backing); display: grid; place-items: center; transition: var(--transition-default); }
.post-media .ico svg { width: 40px; height: 40px; stroke: var(--rk-turquoise-ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Karten (Übersicht, Teaser, „Weitere Beiträge") */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.post-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-default); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-box);
  transition: var(--transition-default);
}
.post-card:hover { border-color: var(--rk-turquoise); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.post-card:hover .post-media img { transform: scale(1.04); }
.post-card:hover .post-media .ico { background: var(--rk-turquoise); }
.post-card:hover .post-media .ico svg { stroke: var(--rk-ink); }
.post-card-media { display: block; }
.post-card-media .post-media { border-radius: 0; }
.post-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-4); }
.post-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-3); font-size: 13px; color: var(--text-meta); }
.post-card-meta .tag {
  display: inline-block; font-size: 12px; font-weight: var(--weight-bold); letter-spacing: .06em; text-transform: uppercase;
  color: var(--rk-ink); background: var(--accent-backing); padding: 4px 10px; border-radius: var(--radius-pill); text-decoration: none; transition: var(--transition-default);
}
.post-card-meta .tag:hover { background: var(--rk-turquoise); text-decoration: none; }
.post-card-title { font-size: 20px; line-height: 1.3; margin-bottom: var(--space-2); text-wrap: pretty; }
.post-card-title a { color: var(--text-heading); text-decoration: none; }
.post-card-title a:hover { color: var(--rk-turquoise-ink); }
.post-card-excerpt p { font-size: 15px; color: var(--text-muted); line-height: var(--leading-tight); }
.post-card-foot { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.post-card-src { font-size: 12.5px; color: var(--text-meta); }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }

/* Startseiten-Teaser: Intro links, „Alle Beiträge" rechts unten bündig */
.news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.news-head .lead { margin-top: var(--space-2); }
.news-head .more { margin-bottom: 6px; }
@media (max-width: 640px) { .news-head { align-items: flex-start; margin-bottom: var(--space-4); } }

/* Übersicht: Kategorie-Filter, Leerzustand, Seitennavigation */
.blog-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.blog-filter .chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-default); background: var(--surface-default); color: var(--rk-ink);
  font-size: 14.5px; font-weight: var(--weight-semibold); text-decoration: none; transition: var(--transition-default);
}
.blog-filter .chip:hover { border-color: var(--rk-turquoise); text-decoration: none; }
.blog-filter .chip.is-active { background: var(--rk-turquoise); border-color: var(--rk-turquoise); }
.blog-filter .count { font-size: 12px; font-weight: var(--weight-medium); color: var(--text-meta); background: var(--surface-mist); padding: 2px 8px; border-radius: var(--radius-pill); line-height: 1.4; }
.blog-filter .chip.is-active .count { background: rgba(16, 24, 32, .12); color: var(--rk-ink); }
.blog-empty { padding: var(--space-5); border: 1px dashed var(--border-default); border-radius: var(--radius-box); background: var(--surface-mist); max-width: 62ch; }
.blog-empty h2 { font-size: 24px; margin-bottom: var(--space-2); }
.blog-empty p { color: var(--text-muted); }
.pagination { margin-top: var(--space-5); }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-target); min-height: var(--tap-target); padding: 0 14px;
  border-radius: var(--radius-pill); border: var(--border-width) solid var(--border-default); color: var(--rk-ink); font-weight: var(--weight-semibold); font-size: 14.5px; text-decoration: none;
}
.pagination .page-numbers.current { background: var(--rk-turquoise); border-color: var(--rk-turquoise); }
.pagination .page-numbers.dots { border: 0; min-width: 0; }
.pagination a.page-numbers:hover { border-color: var(--rk-turquoise); text-decoration: none; }

/* Einzelbeitrag */
.page-hero--post h1 { max-width: 28ch; font-size: clamp(28px, 3.8vw, 46px); text-wrap: balance; }
.post-meta { margin-top: var(--space-3); font-size: 14px; color: var(--text-meta); display: flex; gap: 8px; flex-wrap: wrap; }
/* kein max-height: mit aspect-ratio würde die Höhe die Breite begrenzen (Box wäre schmaler als der Wrap) */
.post-media--hero { aspect-ratio: 5 / 2; border-radius: var(--radius-box); margin-bottom: var(--space-5); }
.post-media--hero .ico { width: 104px; height: 104px; }
.post-media--hero .ico svg { width: 50px; height: 50px; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: var(--space-6); align-items: start; }
.post-body { max-width: var(--measure); }
.post-body > p:first-child { font-size: var(--text-lead); color: var(--text-muted); line-height: 1.5; text-align: left; hyphens: manual; } /* Lead bleibt linksbündig (wie alle Leads) */
.post-body h2 { font-size: 26px; line-height: var(--leading-heading); margin-top: var(--space-5); }
.post-body h3 { font-size: 20px; }
.post-body ul li, .post-body ol li { margin-bottom: 8px; }
.post-body a { text-decoration: underline; text-decoration-color: var(--rk-turquoise-line); text-underline-offset: 3px; }
.post-body a:hover { text-decoration-color: currentColor; }
.post-body figure { margin: var(--space-4) 0; }
.post-body img { border-radius: var(--radius-card); }
.post-body blockquote { margin: var(--space-4) 0; padding-left: var(--space-3); border-left: 3px solid var(--rk-turquoise); font-style: italic; color: var(--text-muted); }
.post-source { margin-top: var(--space-5); padding: var(--space-4); border: var(--border-width) solid var(--border-default); border-left: 3px solid var(--rk-turquoise); border-radius: var(--radius-card); background: var(--surface-mist); }
.post-source .label { display: block; font-size: 12px; font-weight: var(--weight-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--rk-turquoise-ink); margin-bottom: 6px; }
.post-source p { font-size: 15px; color: var(--text-body); margin: 0 0 var(--space-3); max-width: none; }
.post-source .btn { padding: 12px 22px; font-size: 14.5px; }
.post-back { margin-top: var(--space-5); }
.post-aside .btn { width: 100%; margin-bottom: var(--space-4); }
.post-aside h3 + p { margin-top: 0; }
.post-aside .aside-links { margin-top: 0; }
.post-more .post-grid { margin-top: var(--space-5); }
.cases-archive { margin-top: var(--space-3); }
@media (max-width: 900px) {
  .post-layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .post-aside { position: static; }
  .post-media--hero { aspect-ratio: 16 / 9; margin-bottom: var(--space-4); }
}

/* Erfolge (15.09.2026): Rechtsgebiet neben dem Kategorie-Tag, Hinweis-Zeile am Fall */
.post-card-area { font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--rk-turquoise-ink); }
.post-meta a { color: var(--rk-turquoise-ink); text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }
.post-body > p.post-note { font-size: 13.5px; color: var(--text-meta); line-height: var(--leading-tight); padding: 10px 14px; border-left: 3px solid var(--border-default); background: var(--surface-mist); border-radius: var(--radius-button); text-align: left; hyphens: manual; max-width: 70ch; }
.post-body > p.post-note + p { margin-top: var(--space-4); font-size: var(--text-lead); color: var(--text-muted); line-height: 1.5; text-align: left; hyphens: manual; } /* Lead nach dem Hinweis */

/* ---------- Erfolge als kurze Meldungen (23.09.2026) ----------
   Einzelseite: Text in Lead-Größe, Hinweis darunter. Karten (case-card.php):
   Titel verlinkt den Fall; eine einzelne Karte auf der Startseite nimmt die
   ganze Breite; Archiv /erfolge/ dreispaltig auf Nebel. */
.post-single.category-erfolge .post-body > p:first-child { font-size: var(--text-lead); color: var(--text-muted); line-height: 1.5; text-align: left; hyphens: manual; }
.post-single.category-erfolge .post-body > p.post-note { margin-top: var(--space-4); }
.slide h3 a { color: inherit; text-decoration: none; }
.slide h3 a:hover { color: var(--rk-turquoise-ink); }
.cases-layout .cases-grid > .slide:only-child { grid-column: 1 / -1; }
.cases-grid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .cases-grid--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cases-grid--archive { grid-template-columns: 1fr; } }
.s-mist .blog-filter .count { background: var(--surface-default); }


/* ================================================================
   Block-Editor-Seiten (22.09.2026): Core-Block-Markup ↔ Theme-Klassen.
   Die Muster (patterns/) tragen unsere Klassen (page-hero, wrap, intro-grid,
   eyebrow, lead, ch-cta …); hier nur, was WordPress selbst erzeugt:
   .wp-block-button__link statt .btn, .wp-block-buttons statt .cta-row-div,
   Layout-Klassen. Spezifität 2 Klassen, damit die Core-Buttonregeln
   (.wp-element-button) nicht gewinnen.
   ================================================================ */
.wp-block-button > .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-target); padding: 15px 30px; border-radius: var(--radius-button);
  font-family: var(--font-text); font-weight: var(--weight-semibold); font-size: 16px; line-height: 1.2;
  text-decoration: none; border: var(--border-width-strong) solid transparent; transition: var(--transition-default);
  background: var(--accent-fill); color: var(--accent-on-fill);
}
.wp-block-button > .wp-block-button__link:hover { transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-hover); text-decoration: none; }
.wp-block-button.is-style-ghost > .wp-block-button__link { background: transparent; color: var(--rk-ink); border-color: var(--rk-turquoise-deep); }
.wp-block-button.is-style-ghost > .wp-block-button__link:hover { background: var(--rk-turquoise); color: var(--rk-ink); border-color: transparent; }
.wp-block-buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.wp-block-buttons > .wp-block-button { margin: 0; }
.page-hero .cta-row { margin-top: var(--space-4); }
.intro-aside .wp-block-buttons, .intro-aside .wp-block-button { width: 100%; }
.intro-aside .wp-block-button > .wp-block-button__link { width: 100%; }
.aside-links ul { list-style: none; margin: 0; padding: 0; }
.aside-links li { margin: 0; padding: 0; }
.ch-cta .wp-block-buttons { flex: 0 0 auto; }
.ch-cta .wp-block-button > .wp-block-button__link { padding: 12px 22px; font-size: 14.5px; }
.wp-block-group.wrap > .rk-blk.chapters-layout { margin-top: var(--space-5); } /* Abstand zum Lead wie im Legacy-Template; FAQ-Listen behalten .faq-list */
.wp-block-group.wrap { max-width: var(--content-width); margin-left: auto; margin-right: auto; }
.rg-copy .rk-list, .intro-copy .rk-list { max-width: 62ch; }

/* ---------- Block-Varianten der Startseiten-/LP-Module (22.09.2026) ----------
   Zahl/Text-Kacheln, Hero-Notiz, Medienliste, Textlink-Button, Kapitel-Aside. */
.stat p.stat-num { display: block; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 26px; line-height: 1.15; color: var(--rk-turquoise-ink); margin-bottom: 4px; }
.stat p.stat-label { font-size: 13.5px; color: var(--text-muted); line-height: var(--leading-tight); }
.kpi p.kpi-num { display: block; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 36px; line-height: 1; color: var(--rk-turquoise-ink); }
.kpi p.kpi-label { font-size: 14px; color: var(--text-muted); }
@media (max-width: 480px) { .stat p.stat-num { font-size: 20px; } }
.page-hero p.note { font-size: 14px; color: var(--text-meta); margin-top: var(--space-3); }
.intro-aside .aside-links--first { margin-top: 0; padding-top: 0; border-top: 0; }
.intro-aside .aside-links + .wp-block-buttons { margin-top: var(--space-3); }
.press ul.press-media, .press ul.press-marquee { display: contents; list-style: none; margin: 0; padding: 0; }
.press ul.press-media li { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 17px; color: var(--text-muted); }
.wp-block-button.is-style-more > .wp-block-button__link {
  display: inline-block; min-height: var(--tap-target); padding: 9px 16px; border: 0; border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold); font-size: 15px; line-height: 26px; color: var(--rk-ink); background: var(--accent-backing);
}
.wp-block-button.is-style-more > .wp-block-button__link:hover { background: var(--rk-turquoise); transform: none; box-shadow: none; }
.news-head .wp-block-buttons { margin-bottom: 6px; }
.review > p.src { margin-top: auto; padding-top: var(--space-3); font-size: 13px; color: var(--text-meta); font-style: normal; }
.hero .wp-block-group.hero-copy { max-width: 620px; }

/* ---------- Rechtsgebiets-Seiten: Stand/Verantwortlich + Verwandte Rechtsgebiete (inc/seo.php, Audit 25.09.2026) ---------- */
.rk-related-section { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.rk-trust { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; color: var(--text-meta); padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--border-default); }
.rk-trust a { color: var(--rk-turquoise-ink); font-weight: var(--weight-semibold); text-decoration: none; }
.rk-trust a:hover { text-decoration: underline; }
.rk-trust-role { color: var(--text-meta); }
.rk-related-title { font-size: 24px; margin-bottom: var(--space-3); }
.rk-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.rk-related-card {
  display: flex; flex-direction: column; gap: 8px; padding: var(--space-4);
  background: var(--surface-default); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-box);
  color: var(--text-body); text-decoration: none; transition: var(--transition-default);
}
.rk-related-card strong { color: var(--text-heading); font-size: 18px; }
.rk-related-card span { font-size: 15px; color: var(--text-muted); }
.rk-related-card .rk-related-more { margin-top: auto; font-weight: var(--weight-semibold); color: var(--rk-turquoise-ink); }
.rk-related-card:hover { border-color: var(--rk-turquoise); transform: translateY(-3px); box-shadow: var(--shadow-card); text-decoration: none; }
@media (max-width: 860px) { .rk-related { grid-template-columns: 1fr; } }
.contact-direct { margin-top: var(--space-3); font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.contact-direct a { font-weight: var(--weight-semibold); color: var(--rk-turquoise-ink); }

/* ---------- Fristenrechner (Block rk/fristenrechner, Idee aus rk-legal.vercel.app/#frist) ----------
   Abschnitt: dunkle Fläche, links Text (Core-Blöcke), rechts weiße Rechner-Karte. */
.frist-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-6); align-items: start; }
.frist-grid > .wp-block-group:first-child { position: sticky; top: 110px; }
.frist-steps { list-style: none; counter-reset: fs; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 12px; }
.frist-steps li { counter-increment: fs; display: flex; gap: 14px; align-items: baseline; color: var(--text-on-dark-muted); }
.frist-steps li::before {
  content: counter(fs); flex: 0 0 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center;
  font-family: var(--font-display); font-size: 14px; background: var(--rk-turquoise-veil); color: var(--text-on-dark-signal);
  transform: translateY(-1px);
}
.frist-note { margin-top: var(--space-4); font-size: 13.5px; color: var(--text-on-dark-meta); max-width: 52ch; }

.frist-calc {
  background: var(--surface-default); color: var(--text-body); border-radius: var(--radius-box);
  padding: var(--space-4); box-shadow: 0 18px 44px rgba(0, 0, 0, .28); display: grid; gap: var(--space-4);
}
.frist-calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.frist-calc legend, .frist-lab { display: block; font-weight: var(--weight-semibold); font-size: 15px; margin-bottom: 10px; padding: 0; }
.frist-seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.frist-seg label { position: relative; cursor: pointer; }
.frist-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.frist-seg span {
  display: block; height: 100%; padding: 11px 13px; border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-input); font-size: 14.5px; font-weight: var(--weight-semibold); line-height: 1.25;
  transition: border-color .15s, background .15s;
}
.frist-seg small { display: block; font-weight: 400; font-size: 12.5px; color: var(--text-meta); margin-top: 3px; }
.frist-seg label:hover span { border-color: var(--rk-turquoise-deep); }
.frist-seg input:checked + span { border-color: var(--rk-turquoise-deep); background: var(--rk-turquoise-wash); box-shadow: inset 0 0 0 1px var(--rk-turquoise-deep); }
.frist-seg input:focus-visible + span { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.frist-date {
  width: 100%; font: inherit; font-size: 16px; padding: 11px 13px; border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-input); background: var(--surface-default); color: var(--text-body);
}
.frist-date:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }

.frist-result {
  --frist-signal: var(--rk-success);
  border-radius: var(--radius-card); background: var(--surface-mist); border-left: 4px solid var(--frist-signal);
  padding: var(--space-4); display: grid; gap: 6px;
}
.frist-result[data-state="warn"] { --frist-signal: var(--rk-warn); }
.frist-result[data-state="urg"], .frist-result[data-state="past"] { --frist-signal: var(--rk-error); }
.frist-k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: var(--weight-semibold); }
.frist-end { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; color: var(--text-heading); }
.frist-days { font-size: 15px; color: var(--text-muted); }
.frist-days b { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--frist-signal); }
.frist-result[data-state="ok"] .frist-days b { color: var(--text-heading); }
.frist-basis { font-size: 13.5px; color: var(--text-meta); margin: 4px 0 0; }
.frist-advice { font-size: 15px; margin: 2px 0 var(--space-2); }
.frist-result .btn { justify-self: start; }

@media (max-width: 900px) {
  .frist-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .frist-grid > .wp-block-group:first-child { position: static; }
}
@media (max-width: 420px) {
  .frist-calc { padding: var(--space-3); }
  .frist-seg { grid-template-columns: 1fr; }
}
.frist-grid h2 { margin: var(--space-3) 0; }

/* ---------- Bewertungs-Laufband (Block rk/bewertungen-laufband, Idee aus rk-legal.vercel.app/#bewertungen) ----------
   Drei gegenläufige Bänder, kompakte Karten mit 3-Zeilen-Auszug, weiche Ränder;
   Hover hält das Band an und hebt die Karte unter dem Zeiger hervor. */
.rv-band { --rv-fade: var(--surface-mist); margin-top: var(--space-4); }
.s-white .rv-band { --rv-fade: var(--surface-default); }
.rv-score {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-heading);
  padding: 10px 18px; border-radius: var(--radius-pill); background: var(--surface-default); border: var(--border-width) solid var(--border-default);
  box-shadow: var(--shadow-card); transition: border-color .2s;
}
.rv-score:hover { border-color: var(--rk-turquoise-deep); text-decoration: none; }
.rv-score b { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 28px; line-height: 1; }
.rv-stars { color: var(--rk-star); letter-spacing: 2px; font-size: 15px; }
.rv-score-meta { font-size: 13.5px; color: var(--text-muted); }

/* Das Band läuft über die volle Fensterbreite, auch innerhalb von .wrap. */
.rv-marquee {
  position: relative; display: grid; gap: 14px; margin-top: var(--space-5);
  width: 100vw; margin-left: calc(50% - 50vw);
}
.rv-marquee::before, .rv-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18%; z-index: 2; pointer-events: none; }
.rv-marquee::before { left: 0; background: linear-gradient(90deg, var(--rv-fade) 10%, transparent); }
.rv-marquee::after { right: 0; background: linear-gradient(270deg, var(--rv-fade) 10%, transparent); }
.rv-track { display: flex; width: max-content; animation: rk-marquee var(--rv-dur, 70s) linear infinite; }
.rv-track.is-rev { animation-direction: reverse; }
.rv-set { display: flex; align-items: stretch; gap: 14px; padding-right: 14px; }
.rv-marquee:hover .rv-track, .rv-marquee:focus-within .rv-track, .rv-band.is-held .rv-track { animation-play-state: paused; }

.rv-q {
  width: 300px; flex: none; display: grid; grid-template-columns: 40px 1fr; gap: 10px 12px; align-content: start;
  padding: 16px 18px; border-radius: var(--radius-card); font: inherit; text-align: left; cursor: pointer; color: inherit;
  background: var(--surface-default); border: var(--border-width) solid var(--border-default);
  transition: opacity .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.rv-av {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rk-turquoise-wash); color: var(--rk-turquoise-ink); font-family: var(--font-display); font-size: 16px;
}
.rv-q-h { display: flex; flex-direction: column; min-width: 0; align-self: center; line-height: 1.25; }
.rv-q-h b { font-weight: var(--weight-semibold); font-size: 14.5px; color: var(--text-heading); }
.rv-q-h span { font-size: 12.5px; color: var(--text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-q-x { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; color: var(--text-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-q-more { grid-column: 1 / -1; font-size: 13px; font-weight: var(--weight-semibold); color: var(--text-link); }
.rv-marquee:hover .rv-q { opacity: .55; }
.rv-marquee .rv-q:hover, .rv-marquee .rv-q:focus-visible { opacity: 1; border-color: var(--rk-turquoise-deep); box-shadow: 0 18px 40px -22px rgba(16, 24, 32, .35); transform: translateY(-2px); }
.rv-q:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.rv-note { margin-top: var(--space-4); text-align: center; font-size: 13.5px; color: var(--text-meta); }
.rv-note a { color: var(--text-link); font-weight: var(--weight-semibold); margin-left: .3em; }

.rv-dialog { border: 0; padding: 0; background: transparent; width: min(620px, calc(100vw - 32px)); max-height: 86vh; overflow: visible; }
.rv-dialog::backdrop { background: rgba(16, 24, 32, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.rv-dialog[open] { animation: rv-pop .38s var(--ease-out) both; }
.rv-dialog[open]::backdrop { animation: rv-fade .3s ease both; }
@keyframes rv-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes rv-fade { from { opacity: 0; } }
.rv-dialog-card {
  position: relative; max-height: 86vh; overflow: auto; background: var(--surface-default); color: var(--text-body);
  border-radius: var(--radius-box); padding: 34px 34px 30px; box-shadow: 0 40px 90px -30px rgba(16, 24, 32, .55);
}
.rv-dialog-top { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.rv-dialog-top .rv-av { width: 52px; height: 52px; font-size: 20px; flex: none; }
.rv-dialog-top b { display: block; font-size: 16px; color: var(--text-heading); }
.rv-dialog-top span { font-size: 13.5px; color: var(--text-meta); }
.rv-dialog .rv-stars { display: block; margin-top: 18px; }
.rv-dialog h3 { margin-top: 8px; font-size: 21px; }
.rv-dialog-text { font-size: 16.5px; line-height: 1.65; margin: 14px 0 22px; }
.rv-dialog-card > a { color: var(--text-link); font-weight: var(--weight-semibold); }
.rv-dialog-x {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
  border: var(--border-width) solid var(--border-default); background: var(--surface-default); cursor: pointer; font-size: 15px; color: var(--text-muted);
}
.rv-dialog-x:hover { color: var(--text-heading); border-color: var(--text-heading); }

@media (max-width: 600px) {
  .rv-q { width: 260px; }
  .rv-marquee::before, .rv-marquee::after { width: 10%; }
  .rv-dialog-card { padding: 26px 22px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-track { animation: none; width: auto; }
  .rv-set[aria-hidden], .rv-q.is-dup { display: none; }
  .rv-set { flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); }
  .rv-marquee::before, .rv-marquee::after { display: none; }
  .rv-dialog[open], .rv-dialog[open]::backdrop { animation: none; }
}

/* ================================================================
   v5 „Papier, Tinte, ein Rot" (28.09.2026, Akzent Rot seit 18.10.2026) — Look des Vercel-Entwurfs
   rk-legal.vercel.app, von den Anwälten abgesegnet (als „Entwurf B" auf
   Staging verglichen). Tokens: tokens.css (Block v5). Hier nur die Module,
   deren Form sich gegenüber v4 ändert: Logo, Header, Eyebrow, Buttons,
   Hero, Kacheln, Karten, Kapitel, Fristenrechner, Footer. Steht am Ende.
   Jeder Selektor beginnt mit „:root " — das zählt wie eine Klasse und hebt
   die Regeln eine Stufe über die gleichnamigen v4-Regeln oben (z. B.
   „.page-hero p.lead", „.nav-list a"), ohne !important. Neue v5-Regeln
   ebenso schreiben.
   ================================================================ */
body { -webkit-font-smoothing: antialiased; }
:root h1, :root h2, :root h3, :root h4 { text-wrap: balance; }
/* Kursive Wörter in Überschriften = roter Akzent (im Editor: Text markieren → kursiv) */
:root :is(h1, h2, h3) em { font-style: italic; color: var(--rk-turquoise-deep); }
:root :is(.s-dark, .s-deep, footer) :is(h1, h2, h3) em { color: var(--rk-turquoise); }

/* ---------- Logo: Monogramm + Schriftzug ---------- */
:root .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--rk-ink); white-space: nowrap; }
:root .brand img, :root .nav .logo .brand img { width: auto; height: 34px; margin: 0; }
:root .brand-word { font-family: var(--font-display); font-size: 23px; line-height: 1; letter-spacing: 0; }
:root .brand-word em { color: var(--rk-turquoise-deep); }
:root .nav .logo { text-decoration: none; }
:root .nav .logo:hover { text-decoration: none; }
:root footer .brand { color: var(--text-on-dark); margin-bottom: var(--space-3); }
:root footer .brand img { height: 72px; margin: 0; }

/* ---------- Header ---------- */
:root header { border-bottom-color: rgba(21, 21, 26, .12); }
:root .nav { padding: 14px var(--gutter); } /* .nav hebt sonst den Seitenrand von .wrap auf */
@media (min-width: 720px) { :root .nav { padding-left: var(--gutter-lg); padding-right: var(--gutter-lg); } }
:root .nav-list { gap: 26px; }
:root .nav-list a, :root .nav-list button { font-size: 14.5px; color: var(--text-body); }
:root .nav-list a:hover, :root .nav-list button:hover { color: var(--rk-turquoise-deep); }
:root .has-menu > .menu { border-radius: var(--radius-box); box-shadow: 0 24px 50px -28px rgba(21, 21, 26, .45); }
:root .menu a { border-radius: var(--radius-card); }
:root .menu a:hover { background: var(--surface-mist); color: var(--rk-ink); }
:root .burger span { height: 1.5px; border-radius: 0; }
:root .drawer a, :root .drawer summary { font-family: var(--font-display); font-size: 26px; font-weight: 400; color: var(--rk-ink); }
:root .drawer details ul a { font-family: var(--font-text); font-size: 16px; }
:root .drawer details ul { border-left-width: 1px; }
:root .drawer .btn { font-family: var(--font-text); font-size: 15px; }

/* ---------- Eyebrow: gesperrte Versalien in Rot, ohne Pille ---------- */
:root .eyebrow {
  background: none; padding: 0; border-radius: 0;
  color: var(--rk-turquoise-deep); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  margin-bottom: var(--space-3);
}
:root :is(.s-dark, .s-deep) .eyebrow { background: none; color: var(--rk-turquoise); }

/* ---------- Überschriften / Lead ---------- */
:root h2 { margin-bottom: .05em; }
:root p.lead { color: var(--text-body); max-width: 60ch; margin-top: var(--space-3); }
:root :is(.s-dark, .s-deep) p.lead { color: var(--text-on-dark-muted); }

/* ---------- Buttons: rote Pille, ruhige Ghost-Variante ---------- */
:root .btn, :root .wp-block-button > .wp-block-button__link {
  padding: 14px 26px; font-size: 15px; border-width: 1px; transform: none;
  transition: background .3s cubic-bezier(.16, 1, .3, 1), border-color .3s, color .3s;
}
:root .btn:hover, :root .wp-block-button > .wp-block-button__link:hover { transform: none; box-shadow: none; }
:root .btn-primary, :root .wp-block-button:not([class*="is-style-"]) > .wp-block-button__link { background: #B63D4B; border-color: #B63D4B; color: #fff; }
:root .btn-primary:hover, :root .wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:hover { background: #962F3C; border-color: #962F3C; color: #fff; }
:root .btn-ghost, :root .wp-block-button.is-style-ghost > .wp-block-button__link,
:root :is(.s-white, .s-mist, .hero, .page-hero) .btn-ghost { background: transparent; color: var(--rk-ink); border-color: rgba(21, 21, 26, .28); }
:root .btn-ghost:hover, :root .wp-block-button.is-style-ghost > .wp-block-button__link:hover,
:root :is(.s-white, .s-mist, .hero, .page-hero) .btn-ghost:hover { background: rgba(21, 21, 26, .05); color: var(--rk-ink); border-color: rgba(21, 21, 26, .45); }
:root :is(.s-dark, .s-deep) .btn-ghost,
:root :is(.s-dark, .s-deep) .wp-block-button.is-style-ghost > .wp-block-button__link { color: var(--text-on-dark); border-color: rgba(245, 242, 236, .4); }
:root :is(.s-dark, .s-deep) .btn-ghost:hover,
:root :is(.s-dark, .s-deep) .wp-block-button.is-style-ghost > .wp-block-button__link:hover { background: rgba(245, 242, 236, .08); color: var(--text-on-dark); }
:root header .btn-primary { padding: 10px 20px !important; font-size: 14px !important; }
:root .nav-list a.btn-primary, :root .nav-list a.btn-primary:hover, :root .drawer a.btn-primary { color: #fff; }

/* „Mehr"-Links: roter Textlink mit Haarlinie statt Pille */
:root .more, :root .wp-block-button.is-style-more > .wp-block-button__link {
  background: none; padding: 0; min-height: 0; border-radius: 0; line-height: 1.5;
  color: var(--rk-turquoise-deep); font-size: 15px; font-weight: 600;
  border-bottom: 1px solid rgba(182, 61, 75, .35);
}
:root .more:hover, :root .wp-block-button.is-style-more > .wp-block-button__link:hover { background: none; color: #962F3C; border-bottom-color: currentColor; text-decoration: none; }
:root :is(.s-dark, .s-deep) .more,
:root .side-panel .more, :root .back-actions .more { background: none; }
:root :is(.s-dark, .s-deep) .more { color: var(--rk-turquoise); border-bottom-color: rgba(231, 176, 182, .4); }
:root :is(.s-dark, .s-deep) .more:hover { color: #fff; }

/* ---------- Hero Startseite: Foto vollflächig, Text links, Serif-Headline ----------
   Seit 06.10.2026 (vorher dunkle Bühne mit Foto im Rahmen), Foto seit 01.11.2026
   das Büro-Paar. Ab 1280 px liegt es (hero_buehne.jpg, links um Wandfläche
   erweitert — hero-image.py) hinter dem ganzen Hero, Text dunkel links auf einem
   Papier-Verlauf, Badge unter dem Text; darunter heller Hero mit Foto im Rahmen
   (Text liefe sonst über die Personen). */
:root .hero { background: var(--surface-hero); color: var(--text-body); padding: 120px 0 112px; }
:root .hero::before, :root .hero::after { display: none; }
:root .hero .wrap { max-width: var(--content-width); column-gap: 72px; align-items: center; }
:root .hero .eyebrow { grid-column: 1 / -1; text-align: left; color: var(--rk-turquoise-deep); margin: 0; }
:root .hero h1 { color: var(--rk-ink); font-size: clamp(46px, 5.6vw, 84px); max-width: 12ch; }
:root .hero h1 em { background: none; padding: 0; font-style: italic; color: var(--rk-turquoise-deep); }
:root .hero p.lead { color: #2A2A30; font-size: clamp(17px, 1.35vw, 19px); max-width: 44ch; }
:root .hero .note { color: #3A3A40; }
:root .hero .note a { color: var(--rk-ink); }
:root .hero .btn-ghost, :root .hero .wp-block-button.is-style-ghost > .wp-block-button__link { color: var(--rk-ink); border-color: rgba(21, 21, 26, .45); }
:root .hero .btn-ghost:hover, :root .hero .wp-block-button.is-style-ghost > .wp-block-button__link:hover { background: rgba(21, 21, 26, .06); color: var(--rk-ink); }
:root .hero-visual::before { display: none; }
:root .hero-visual .frame-img { border-radius: var(--radius-card); box-shadow: none; border: 1px solid rgba(21, 21, 26, .12); }
:root .hero-badge { left: 20px; bottom: 20px; border-radius: 999px; padding: 10px 18px; background: rgba(245, 242, 236, .94); border-color: transparent; }
:root .hero-badge b { font-size: 26px; }
@media (min-width: 1280px) {
  :root .hero {
    --hero-copy-end: calc(max(52px, (100vw - var(--content-width)) / 2) + min(470px, 36vw)); /* rechte Textkante: bis dahin deckt der Papier-Verlauf das Foto ab */
    display: flex; align-items: center; min-height: min(80vh, 860px); padding: 88px 0 96px;
    background:
      linear-gradient(90deg, rgba(245, 242, 236, .92) var(--hero-copy-end), rgba(245, 242, 236, .5) calc(var(--hero-copy-end) + 55px), rgba(245, 242, 236, 0) calc(var(--hero-copy-end) + 120px)),
      var(--surface-hero) url(../img/hero_buehne.jpg) right -64px top / auto 100% no-repeat; /* immer volle Fotohöhe, auch auf sehr breiten Bildschirmen */
  }
  :root .hero .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  :root .hero .wp-block-group.hero-copy, :root .hero .eyebrow { max-width: min(470px, 36vw); }
  :root .hero h1 { font-size: clamp(56px, 5vw, 84px); }
  :root .hero-visual .frame-img { display: none; }
  :root .hero-badge { position: static; display: inline-flex; box-shadow: none; border-color: rgba(21, 21, 26, .14); }
}
@media (max-width: 960px) { :root .hero { padding: 64px 0 72px; } }
@media (max-width: 680px) { :root .hero h1 { font-size: 42px; } :root .hero .eyebrow { font-size: 10.5px; padding: 0; letter-spacing: .16em; } }

/* ---------- Seitenkopf der Unterseiten ---------- */
:root .page-hero { padding: 104px 0 72px; border-bottom: 1px solid var(--border-default); }
:root .page-hero::before { display: none; }
:root .page-hero h1 { font-size: clamp(44px, 5.4vw, 80px); max-width: 16ch; }
:root .breadcrumbs { font-size: 12.5px; letter-spacing: .02em; }
:root .breadcrumbs a:hover { color: var(--rk-turquoise-deep); }

/* ---------- Bekannt aus + Kennzahlen ---------- */
:root .press { background: var(--surface-default); border-bottom: 1px solid var(--border-default); padding: 28px 0; }
:root .press .label { color: var(--rk-turquoise-deep); font-size: 11.5px; letter-spacing: .2em; }
:root .press .medium, :root .press ul.press-media li, :root .press ul.press-marquee li { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--text-muted); }
:root .kpis-band { background: var(--surface-default); border-top: 0; }
:root .kpis { gap: 0; padding-top: 0; padding-bottom: 0; }
:root .kpi { padding: 28px 24px 30px 0; }
:root .kpi + .kpi { padding-left: 24px; border-left: 1px solid var(--border-default); }
:root .kpi b, :root .kpi p.kpi-num { font-weight: 400; font-size: 46px; color: var(--rk-turquoise-deep); letter-spacing: 0; }
:root .kpi span, :root .kpi p.kpi-label { font-size: 14.5px; color: var(--text-body); }
@media (max-width: 760px) { :root .kpi { padding-right: 12px; } :root .kpi + .kpi { padding-left: 16px; } :root .kpi:nth-child(odd) { padding-left: 0; border-left: 0; } :root .kpi b, :root .kpi p.kpi-num { font-size: 36px; } }

/* ---------- Flächen & Rhythmus ---------- */
:root section { padding: calc(var(--section-rhythm) * 1.1) 0; }
:root .s-sand { border-color: var(--border-default); background: var(--surface-mist); }
@media (max-width: 1024px) { :root section { padding: 88px 0; } }
@media (max-width: 640px) { :root section { padding: 72px 0; } }

/* ---------- Rechtsgebiete: Kachel-Bühne eckig, Haarlinie ---------- */
:root #saeulen h2 { font-size: clamp(40px, 4.8vw, 64px); max-width: 16ch; }
:root #saeulen p.lead { margin-left: auto; margin-right: auto; }
:root .tiles { gap: 0; border-top: 1px solid var(--border-default); border-left: 1px solid var(--border-default); }
:root .tile {
  border: 0; border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default);
  border-radius: 0; background: transparent; font-family: var(--font-display); font-weight: 400; font-size: 24px; min-height: 196px;
}
:root .tile .ico { width: 58px; height: 58px; background: transparent; border: 1px solid var(--border-default); }
:root .tile svg { stroke: var(--rk-turquoise-deep); stroke-width: 1.3; width: 28px; height: 28px; }
:root .tile:hover { transform: none; background: rgba(182, 61, 75, .04); box-shadow: none; }
:root .tile:hover .ico { background: var(--rk-turquoise-wash); border-color: transparent; }
:root .tile:hover svg { stroke: var(--rk-turquoise-deep); }
:root .tile[aria-expanded="true"] { background: #B63D4B; color: #F5F2EC; box-shadow: none; }
:root .tile[aria-expanded="true"] .ico { background: transparent; border-color: rgba(245, 242, 236, .35); }
:root .tile[aria-expanded="true"] svg { stroke: #F5F2EC; }
:root .side-panel { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-box); }
:root .side-panel h3 { font-size: 36px; }
:root .side-panel p { color: var(--text-body); }
@media (max-width: 1024px) { :root .tile { font-size: 21px; min-height: 164px; } }
@media (max-width: 760px) { :root .tile { font-size: 18px; min-height: 132px; } :root .tile .ico { width: 48px; height: 48px; } }

/* ---------- Karten allgemein: eckig, zart umrandet, ohne Schatten ---------- */
:root :is(.slide, .review, .stat, .contact-card, .post-card, .sub-card, .rk-related-card, .intro-aside, .bl-aside, .ch-cta, .frame, .anwde-consent, .post-source, .blog-empty) {
  border-radius: var(--radius-box); box-shadow: none; border-color: var(--border-default);
}
:root :is(.post-card, .sub-card, .rk-related-card):hover { transform: none; box-shadow: none; border-color: var(--rk-ink); }
:root :is(.contact-card, .post-card, .sub-card, .rk-related-card, .review) { background: #FBFAF7; }
:root .s-mist :is(.slide, .contact-card) { background: #FBFAF7; }

/* Erfolge */
:root .slide .tag { color: var(--rk-turquoise-deep); letter-spacing: .16em; font-size: 11.5px; }
:root .slide h3 { font-family: var(--font-display); font-size: 26px; line-height: 1.12; }

/* Team: Flip-Cards */
:root .person .face { border-radius: var(--radius-box); border-color: var(--border-default); background: #FBFAF7; }
:root .person .face-back { background: #15151A; border-color: #15151A; }
:root .person h3 { font-size: 30px; }
:root .person .role { color: var(--rk-turquoise-deep); }
:root .face-back .role { color: var(--rk-turquoise); }
:root .flip-btn { border-radius: 999px; background: transparent; border-color: rgba(21, 21, 26, .28); }
:root .flip-btn:hover { background: rgba(21, 21, 26, .05); border-color: rgba(21, 21, 26, .45); }
:root .face-back .flip-btn { color: #F5F2EC; border-color: rgba(245, 242, 236, .35); }
:root .face-back .flip-btn:hover { background: rgba(245, 242, 236, .08); color: #F5F2EC; }
:root .vita li::before { background: var(--rk-turquoise); height: 1px; }
:root .member-photo { border-radius: var(--radius-card); }
:root .member-body h2 { font-size: clamp(34px, 3.6vw, 48px); }
:root .member-body .vita li::before { background: var(--rk-turquoise-deep); }

/* Bewertungs-Laufband */
:root .rv-q { border-radius: var(--radius-box); background: #FBFAF7; }
:root .rv-av { font-family: var(--font-display); font-size: 17px; background: var(--rk-turquoise-wash); color: var(--rk-turquoise-deep); }
:root .rv-marquee .rv-q:hover, :root .rv-marquee .rv-q:focus-visible { border-color: var(--rk-turquoise-deep); background: #fff; }
:root .rv-score { box-shadow: none; background: rgba(255, 255, 255, .7); }
:root .rv-score b { font-weight: 400; font-size: 30px; }
:root .rv-dialog-card { border-radius: var(--radius-box); }
:root .rv-dialog h3 { font-size: 30px; }
:root .review p { font-family: var(--font-display); font-style: normal; font-size: 21px; line-height: 1.3; color: var(--rk-ink); }

/* B2B */
:root .s-white .frame, :root .frame { background: #FBFAF7; border: 1px solid var(--border-default); }
:root .frame h3 { font-size: 26px; }
:root .b2b-inner li::before { height: 1px; width: 16px; top: 13px; }

/* News */
:root .post-media { border-radius: 0; }
:root .post-media.is-placeholder { background: var(--surface-mist); }
:root .post-media.is-placeholder::before, :root .post-media.is-placeholder::after { display: none; }
:root .post-media .ico { background: transparent; border: 1px solid rgba(21, 21, 26, .18); }
:root .post-media .ico svg { stroke: var(--rk-turquoise-deep); stroke-width: 1.3; }
:root .post-card:hover .post-media .ico { background: var(--rk-turquoise-wash); }
:root .post-card:hover .post-media .ico svg { stroke: var(--rk-turquoise-deep); }
:root .post-card-title { font-size: 25px; line-height: 1.15; }
:root .post-card-meta .tag { background: none; padding: 0; color: var(--rk-turquoise-deep); letter-spacing: .16em; font-size: 11px; }
:root .blog-filter .chip { border-color: rgba(21, 21, 26, .22); background: transparent; }
:root .blog-filter .chip.is-active { background: #B63D4B; border-color: #B63D4B; color: #fff; }
:root .blog-filter .chip.is-active .count { background: rgba(255, 255, 255, .16); color: #fff; }
:root .pagination .page-numbers.current { background: #B63D4B; border-color: #B63D4B; color: #fff; }

/* Kontakt */
:root .contact-card h3 { font-size: 30px; }
:root .field label { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
:root :is(.field input, .field textarea, .field select) { border-radius: var(--radius-input); background: #fff; border-color: rgba(21, 21, 26, .2); font-size: 16px; }
:root :is(.field input, .field textarea, .field select):focus { outline: 2px solid var(--rk-turquoise-deep); border-color: var(--rk-turquoise-deep); }
:root .contact-card form .btn, :root .contact-card form button[type="submit"] { background: #B63D4B; border-color: #B63D4B; color: #fff; border-radius: 999px; }
:root .contact-card form .btn:hover, :root .contact-card form button[type="submit"]:hover { background: #962F3C; }
:root .dark-list li::before, :root .rk-list li::before { height: 1px; width: 14px; top: 12px; background: var(--rk-turquoise-deep); }
:root :is(.booking-embed, .map-slot, .widget-slot) { border-radius: var(--radius-box); }

/* ---------- Unterseiten: Kapitel als Haarlinien-Zeilen ---------- */
:root .chapter { border: 0; border-top: 1px solid var(--border-default); border-radius: 0; background: transparent; margin-bottom: 0; }
:root .chapters > .chapter:last-child, :root .chapter:last-of-type { border-bottom: 1px solid var(--border-default); }
:root .chapter summary { padding: 26px 4px; }
:root .chapter summary:hover { background: rgba(182, 61, 75, .035); }
:root .ch-num { font-size: 22px; color: var(--rk-turquoise-deep); padding-top: 2px; }
:root .ch-title, :root .chapter h2.ch-title { font-size: 27px; line-height: 1.15; }
:root .chapter h3.ch-title { font-size: 24px; }
:root .chapter h4.ch-title { font-size: 21px; }
:root .ch-marker { font-family: var(--font-text); font-weight: 300; font-size: 26px; color: var(--rk-turquoise-deep); }
:root .ch-body { padding-left: calc(4px + 38px); padding-right: 4px; }
:root .ch-body h3 { font-size: 26px; }
:root .ch-body h4 { font-family: var(--font-display); font-weight: 400; font-size: 21px; }
:root .ch-summary { background: var(--rk-turquoise-wash); border-left: 2px solid var(--rk-turquoise-deep); border-radius: 0; }
:root .ch-summary-label { color: var(--rk-turquoise-deep); letter-spacing: .16em; }
:root .ch-cta { background: transparent; border: 1px solid var(--border-default); }
:root .ch-faq .chapter { background: transparent; }
/* Bundesländer: Boxen im Raster behalten, aber eckig und zart umrandet */
:root .bl-grid .chapter { border: 1px solid var(--border-default); border-radius: var(--radius-box); background: #FBFAF7; }
:root .chapter.bl summary { padding: 16px 20px; }
:root .chapter.bl .ch-title { font-size: 22px; }
:root .chapter.bl .ch-body { padding: 8px 20px 24px; }
:root .bl-switch { border-radius: 999px; background: transparent; border-color: rgba(21, 21, 26, .22); }
:root .bl-switch-btn.is-active { background: #B63D4B; color: #fff; }
:root .bl-aside { background: var(--surface-default); }

/* Inhaltsverzeichnis */
:root .toc ol { border-left-width: 1px; }
:root .toc li a { border-left-width: 1px; margin-left: -1px; }
:root .toc li a.is-active { border-left-color: var(--rk-turquoise-deep); }
:root .toc .toc-num { color: var(--rk-turquoise-deep); }

/* Zahlen-Band unter dem Seitenkopf: Haarlinien statt Kästchen */
:root .exa-stats { background: var(--surface-default); border-bottom: 1px solid var(--border-default); padding: 0; }
:root .exa-stats-grid { gap: 0; }
:root .stat { background: transparent; border: 0; border-radius: 0; border-left: 1px solid var(--border-default); padding: 26px 24px; }
:root .stat:first-child { border-left: 0; padding-left: 0; }
:root .stat b, :root .stat p.stat-num { font-weight: 400; font-size: 34px; color: var(--rk-turquoise-deep); }
@media (max-width: 900px) { :root .stat:nth-child(odd) { border-left: 0; padding-left: 0; } :root .stat { border-top: 1px solid var(--border-default); } }

/* Listen */
:root .rk-chips li { border-radius: 999px; background: transparent; border-color: rgba(21, 21, 26, .2); }
:root .rk-checks li { border-radius: var(--radius-card); background: #FBFAF7; }
:root .rk-checks li::before { background: #B63D4B; }
:root .rk-checks li::after { border-color: #fff; }
:root .steps .step::before { background: transparent; border: 1px solid var(--rk-turquoise-deep); color: var(--rk-turquoise-deep); font-family: var(--font-display); font-weight: 400; font-size: 20px; }
:root .steps .step::after { width: 1px; left: 19px; background: var(--border-default); }
:root .ch-body h3.step-h { border-left-color: var(--rk-turquoise-deep); border-left-width: 2px; }
:root .person-quote, :root .post-body blockquote { border-left-width: 2px; border-left-color: var(--rk-turquoise-deep); font-family: var(--font-display); font-size: 20px; line-height: 1.35; font-style: italic; color: var(--rk-ink); }
:root .intro-copy h2, :root .post-body h2 { font-size: clamp(30px, 3vw, 40px); }
:root .intro-copy h3, :root .post-body h3 { font-size: 25px; }
:root .intro-aside { background: #FBFAF7; }
:root .intro-aside h3 { font-size: 26px; }
:root .rk-related-card strong { font-family: var(--font-display); font-weight: 400; font-size: 26px; }

/* ---------- Fristenrechner in B (wie im Vercel-Entwurf: dunkle Fläche → hell) ---------- */
:root .s-dark:has(.frist-grid) { background: var(--surface-default); color: var(--text-body); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
:root .frist-grid h2 { color: var(--rk-ink); }
:root .frist-grid .eyebrow { color: var(--rk-turquoise-deep); }
:root .frist-grid p.lead { color: var(--text-body); }
:root .frist-grid .frist-steps li { color: var(--text-body); }
:root .frist-grid .frist-steps li::before { background: none; color: var(--rk-turquoise-deep); font-size: 24px; width: auto; flex-basis: 20px; }
:root .frist-grid .frist-note { color: var(--text-muted); }
:root .frist-calc { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-box); box-shadow: 0 30px 60px -40px rgba(21, 21, 26, .35); }
:root .frist-calc legend, :root .frist-lab { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
:root .frist-seg span, :root .frist-date { border-radius: var(--radius-card); border-color: rgba(21, 21, 26, .2); }
/* Fristenrechner zart rosé (Anwälte 18.10.2026); „sehr knapp“ hebt sich mit kräftigerem Rosé + rotem Balken ab */
:root .frist-seg input:checked + span { background: #F8EDEB; border-color: rgba(182, 61, 75, .55); box-shadow: none; }
:root .frist-result { border-radius: var(--radius-card); background: #F8EDEB; border-left: 0; }
:root .frist-result[data-state="warn"] { background: #F6ECDC; }
:root .frist-result[data-state="urg"] { background: #F1D3D2; box-shadow: inset 4px 0 0 #B63D4B; }
:root .frist-result[data-state="past"] { background: #EDE9E3; }
:root .frist-end { font-size: clamp(30px, 3.2vw, 42px); }
:root .frist-days b { font-size: 56px; font-weight: 400; color: var(--rk-ink); }
:root .frist-result[data-state="warn"] .frist-days b { color: #9A5B12; }
:root .frist-result[data-state="urg"] .frist-days b { color: #8E1F1F; }

/* ---------- Footer ---------- */
:root footer { background: #15151A; color: #B9B4AA; }
:root footer h4 { font-family: var(--font-text); font-weight: 600; font-size: 11.5px; letter-spacing: .2em; color: var(--rk-turquoise); }
:root footer a { color: #DCD8D0; font-size: 15px; }
:root footer a:hover { color: #fff; }
:root .cols { border-bottom-color: rgba(245, 242, 236, .14); }
:root .legal a:hover { color: #fff; }

/* ---------- Kleinkram ---------- */
:root .skip-link:focus { background: #B63D4B; color: #fff; }
:root .rk-trust a, :root .aside-links a, :root .rg-more a, :root .contact-direct a { color: var(--rk-turquoise-deep); }
:root p.rk-todo { border-radius: 0; }
/* Kleine Versal-Zwischentitel bleiben in der Textschrift */
:root :is(.member-body h3, .aside-links h4, .toc-title, .chapters .ch-group) { font-family: var(--font-text); font-weight: 600; font-size: 11.5px; letter-spacing: .2em; color: var(--rk-turquoise-deep); }
/* Terminbuchung im Kontaktbereich (Anna, Pin #200, 14.10.2026): Button vor dem Formular bzw. in der rechten Karte */
:root .contact-booking { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: var(--space-3) 0 var(--space-4); }
:root .contact-booking span { font-size: 14px; color: var(--text-muted); }
:root .contact-card .contact-booking + .dark-list { margin-top: var(--space-2); }
/* Bewertungen: zwei Quellen (anwalt.de + Google-Profil der Kanzlei), Pin #199 */
:root .rv-scores { display: flex; flex-wrap: wrap; gap: 10px 14px; }
:root .rv-src { font-weight: 600; }
/* Hauptmenü mit „News & Erfolge“ (Pin #197) braucht einzeilig ca. 1.090 px → Burger-Menü bis 1120 px, Einträge nie umbrechen */
:root .nav-list > li > a { white-space: nowrap; }
@media (max-width: 1120px) { :root .nav-list { display: none; } :root .burger { display: flex; } }

/* ---------- Livegang-Prüfung 18.10.2026: Mobil- und Kontrast-Korrekturen ---------- */
/* Fristenrechner: iOS Safari rechnet das Datumsfeld als content-box und zentriert den Wert → ragt über die Karte */
:root .frist-date { -webkit-appearance: none; appearance: none; box-sizing: border-box; min-height: 48px; text-align: left; }
:root .frist-date::-webkit-date-and-time-value { text-align: left; }
:root .frist-date, :root .frist-land { height: 50px; min-height: 0; line-height: 1.3; }
:root .frist-land {
  width: 100%; box-sizing: border-box; min-height: 48px; font: inherit; font-size: 16px; padding: 11px 13px;
  border: var(--border-width) solid rgba(21, 21, 26, .2); border-radius: var(--radius-card);
  background: var(--surface-default); color: var(--text-body);
}
:root .frist-land:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
/* Kapitel-CTA: Button darf schrumpfen und umbrechen statt aus der Box zu ragen (360–402 px) */
:root .ch-cta .wp-block-buttons { flex: 0 1 auto; margin-left: auto; min-width: 0; max-width: 100%; } /* Desktop: rechtsbündig wie vorher, Mobil: darf schrumpfen */
:root .ch-cta .wp-block-button, :root .ch-cta .wp-block-button > .wp-block-button__link, :root .ch-cta .btn { max-width: 100%; box-sizing: border-box; white-space: normal; text-align: center; }
/* Kapitel-Titel ohne Leerzeichen („BWL/VWL/Wirtschaftswissenschaften“) dürfen umbrechen, verschachtelte Kapitel bleiben im Bildschirm */
:root .ch-head { min-width: 0; }
:root .ch-title { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 560px) {
  :root .ch-body .chapter summary { padding-left: var(--space-3); padding-right: var(--space-3); gap: var(--space-2); }
  :root .ch-body .chapter .ch-body { padding-left: var(--space-3); padding-right: var(--space-3); }
}
/* Team-Karte Rückseite: Zitat war dunkel auf dunkel (1:1), Link Rot auf Dunkel 3,3:1 */
:root .face-back .person-quote { color: #F5F2EC; }
:root .face-back .back-actions .more { color: #E7B0B6; }
/* Nachprüfung 18.10.2026: bei 320 px wuchs die Kapitelspalte auf das längste Wort, die Kontaktkarte auf die längste Select-Option */
@media (max-width: 1023px) { :root .chapters-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { :root .ch-body, :root .ch-body :is(h3, h4, h5, p, li) { overflow-wrap: break-word; } :root .ch-body :is(h3, h4, h5) { hyphens: auto; } }
@media (max-width: 860px) { :root .contact-grid { grid-template-columns: minmax(0, 1fr); } }
:root .contact-card select { width: 100%; min-width: 0; max-width: 100%; }
/* Checklisten und Zahlenraster: Spalten nicht nach dem längsten Wort bemessen (320 px, z. B. „Rechtsbehelfsbelehrung“) */
@media (max-width: 640px) { :root .rk-checks { grid-template-columns: minmax(0, 1fr); } :root .rk-checks li { min-width: 0; overflow-wrap: break-word; } }
@media (max-width: 900px) { :root .exa-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root .stat { min-width: 0; overflow-wrap: break-word; } }