/* Negele Rechtsanwälte — vanilla pixel clone of kanzlei-negele.com
   Breakpoints (Framer): desktop ≥1200 · tablet 810–1199.98 · phone ≤809.98 */

@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url(assets/fonts/inter-300-latin-ext.woff2) format('woff2'); unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url(assets/fonts/inter-300-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap; src:url(assets/fonts/inter-900-latin-ext.woff2) format('woff2'); unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap; src:url(assets/fonts/inter-900-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/inter-400-latin-ext.woff2) format('woff2'); unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/inter-400-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(assets/fonts/inter-500-latin-ext.woff2) format('woff2'); unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(assets/fonts/inter-500-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/inter-600-latin-ext.woff2) format('woff2'); unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/inter-600-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url(assets/fonts/inter-700-latin-ext.woff2) format('woff2'); unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url(assets/fonts/inter-700-latin.woff2?v=2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Red Hat Mono'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/rhm-600-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Red Hat Mono'; font-style:normal; font-weight:600; font-display:swap; src:url(assets/fonts/rhm-600-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Carattere'; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/carattere-viet.woff2) format('woff2'); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family:'Carattere'; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/carattere-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Carattere'; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/carattere-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --black: #0a0a0a;          /* section bg, icon fill */
  --ink: #1b1c1c;            /* text on lime */
  --lime: #e4fe7b;           /* accent / active / buttons */
  --lime-soft: #e2fc7a;      /* nav default links, hero subheading */
  --white-warm: #ffffe6;     /* headings, lines, burger */
  --white-15: #ffffff26;     /* hairlines */
  --white-10: #ffffff1a;     /* active nav cell bg */
  --white-5: #ffffff0d;      /* translucent panels (blog article boxes, erfolge right panel, chips) */
  --nav-bg: #0009;           /* nav bar */
  --black-20: #0003;         /* button arrow divider */
  --black-40: #0006;         /* dotted dividers */
  --khaki: #edebbe;          /* industry cards, ticker chips */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-y: scroll; scroll-behavior: smooth; }
/* hidden-Attribut muss gewinnen: Autoren-Regeln wie .kf-success{display:flex}
   schlagen sonst die UA-Regel [hidden]{display:none} (Danke-Text war vorab sichtbar) */
[hidden] { display: none !important; }

/* ===== Trust bar (Relaunch 2026-07) — sticky above the nav ===== */
:root { --trust-green: #0e2526; } /* PLATZHALTER dark green — swap for the real brand color */
.trust-bar {
  height: 40px;
  background: var(--trust-green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 50px;
}
.trust-bar p {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Red Hat Mono', monospace;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white-warm);
}
.tb-stars { color: var(--lime); font-size: 12px; letter-spacing: 0.12em; }
.tb-short { display: none; }
@media (max-width: 1199.98px) {
  .trust-bar { padding: 0 20px; }
}
@media (max-width: 809.98px) {
  .trust-bar { height: 36px; gap: 10px; }
  .trust-bar p { font-size: 11px; letter-spacing: 0.1em; gap: 8px; }
  .tb-stars { font-size: 12px; }
  .tb-long { display: none; }
  .tb-short { display: inline; }
}

/* Lenis smooth scrolling (the reference runs lenis 1.1.2) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  background: var(--black);
  font-family: 'Inter', 'Inter Placeholder', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; }
p, h1, h2, h3 { margin: 0; }

/* ============ NAV ============ */

.nav-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }

/* progressiver Weichzeichner am unteren Rand (live: fixed, 134px, blur 10, Verlaufsmaske) */
.page-blur {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 134px;
  z-index: 9;
  pointer-events: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 37%, rgb(0, 0, 0) 83%);
  mask-image: linear-gradient(rgba(0, 0, 0, 0) 37%, rgb(0, 0, 0) 83%);
}

.nav {
  position: relative;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  width: 100%;
  padding: 0 50px;
  display: flex;
  justify-content: center;
}
/* borders as overlays so they don't add to layout (Framer data-border pattern) */
.nav::after {
  content: '';
  position: absolute;
  inset: 0;
  border-bottom: 1px solid var(--white-15);
  pointer-events: none;
}

.nav-inner {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 60px;
  width: 100%;
  max-width: 1600px;
}

.nav-brand { display: flex; align-items: center; }

.nav-logo { display: block; width: 157px; height: 51px; }
.nav-logo img { width: 100%; height: 100%; object-fit: contain; }

.burger { display: none; }

.nav-right {
  flex: 1 0 0;
  width: 1px;
  align-self: stretch;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.nav-links { display: flex; flex-flow: row; align-items: center; height: 100%; }

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 20px;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}
.nav-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-right: 1px solid var(--white-15);
  pointer-events: none;
}
.nav-link p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--lime-soft);
  white-space: pre;
}
.nav-link.is-active { background: var(--white-10); }
.nav-link.is-active p { color: var(--lime); }

/* hover: bottom line assembled from two halves sliding in from the sides */
.nl-lines {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 101%;
  height: 1px;
  display: flex;
  overflow: hidden;
}
.nl-lines i {
  flex: 1 0 0;
  height: 1px;
  background: var(--white-warm);
  transform: translateX(-102%);
  transition: transform .45s cubic-bezier(.25, .9, .3, 1);
}
.nl-lines i:last-child { transform: translateX(102%); }
.nav-link:hover .nl-lines i { transform: translateX(0); }

.nav-cta-wrap {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 0;
}

/* ============ BUTTON (Light) ============ */

.btn-light {
  display: flex;
  flex-flow: row;
  align-items: center;
  height: 48px;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}
.btn-text {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 14px 20px;
  background: var(--lime);
  overflow: hidden;
}
.btn-text p {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.04em;
  color: var(--ink);
  white-space: pre;
}
.btn-shine {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 56px;
  left: -46px;
  background: var(--lime);
  filter: blur(10px);
  z-index: 1;
  transition: left .6s cubic-bezier(.3, .7, .3, 1);
}
.btn-light:hover .btn-shine { left: calc(100% + 57px); }
.btn-arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 14px 16px 14px 17px;
  background: var(--lime);
  transition: padding .3s cubic-bezier(.3, .7, .3, 1);
}
.btn-arrow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-left: 1px solid var(--black-20);
  pointer-events: none;
}
.btn-light:hover .btn-arrow { padding: 14px 14px 14px 19px; }
.btn-arrow svg { width: 16px; height: 14px; image-rendering: pixelated; flex-shrink: 0; }

/* ============ HERO ============ */

.hero {
  position: relative;
  background: var(--black);
  width: 100%;
  height: 100vh;
  padding: 120px 50px 100px;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  filter: brightness(.66);
  overflow: hidden;
  z-index: 0;
}
.hero-bg picture { display: block; width: 100%; height: 100%; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

.hero-container {
  position: relative;
  z-index: 1;
  flex: 1 0 0;
  width: 1px;
  max-width: 1600px;
  height: 100%;
  display: flex;
  flex-flow: row;
  align-items: flex-end;
  justify-content: space-between;
}

.hero-left {
  flex: 1 0 0;
  width: 1px;
  max-width: 720px;
  padding: 0 40px 0 0;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 32px;
  overflow: hidden;
}

.hero-avatars { display: flex; flex-flow: row; }
.av {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 4px;
  background: var(--black);
  border-radius: 50%;
  flex: none;
}
.av + .av { margin-left: -24px; }
/* limefarbene Scheibe hinter den freigestellten Portraits (wie live);
   das Graustufen-Filter darf NUR aufs Bild, sonst wird die Scheibe mitentfärbt */
.av::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--lime);
}
.av img {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
}
.av-light::before { background: var(--black); }

.hero-h1 {
  width: 100%;
  font-size: 80px;
  font-weight: 600;
  line-height: .95;
  letter-spacing: -5px;
  color: var(--white-warm);
  text-wrap: balance;
}
.hero-h1 .hl { color: var(--lime); }
.hero-h1 .hl2 { color: var(--lime-soft); }

.hero-sub {
  flex: 1 0 0;
  width: 1px;
  max-width: 500px;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 20px;
  overflow: hidden;
}
/* Der Kunde will hier nur noch das eine Wort "Deutschlandweit." — als 21px-Fliesstext
   wirkt es wie ein verrutschter Satzrest. Deshalb als gesetzte Aussage:
   Lime-Linie + grosse Type, damit die Kuerze gewollt aussieht. */
.hero-sub > p:not(.hero-claim) {
  position: relative;
  width: 100%;
  padding-top: 28px;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--lime-soft);
  text-align: left;
  text-wrap: balance;   /* live: gleichmäßigere Zeilenlängen */
}
.hero-sub > p:not(.hero-claim)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 2px;
  background: var(--lime);
}

/* Der Claim vom alten Hero. Bewusst kleiner und ohne eigene Linie, damit er
   unter dem grossen "deutschlandweit" als Erlaeuterung liest und nicht als
   zweite Headline. */
.hero-claim {
  width: 100%;
  max-width: 460px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--lime-soft);
  text-align: left;
  text-wrap: pretty;
}

.hero-cta-mobile { display: none; }

/* ============ LOAD REVEAL (letters rise + fade, as reference) ============ */

[data-split] .w { display: inline-block; white-space: nowrap; }
[data-split] .l { display: inline-block; }
.anim-ready [data-split] .l {
  opacity: 0;
  transform: translateY(20px);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .6s cubic-bezier(.22, 1, .36, 1);
}
.anim-ready.anim-in [data-split] .l { opacity: 1; transform: none; }

.anim-ready [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .7s cubic-bezier(.22, 1, .36, 1);
}
.anim-ready.anim-in [data-reveal] { opacity: 1; transform: none; }

/* ============ TABLET (810–1199.98) ============ */

@media (max-width: 1199.98px) {
  .nav { padding: 10px 20px; overflow: hidden; }
  .nav-inner { flex-flow: column; gap: 8px; }
  .nav-brand { width: 100%; justify-content: space-between; align-items: center; }
  .nav-right {
    flex: none;
    width: 100%;
    align-self: auto;
    flex-flow: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 67px;
    height: auto;
    display: none;
  }
  .nav.is-open { padding: 0 20px; }
  .nav.is-open .nav-right { display: flex; }
  .nav.is-open .nav-inner { padding-bottom: 40px; gap: 60px; }
  .nav.is-open .nav-brand { height: 64px; align-items: center; }

  .nav-links { flex-flow: column; width: 100%; height: auto; align-items: stretch; }
  .nav-link {
    height: 44px;
    width: 100%;
    justify-content: flex-start;
  }
  .nav-link::after { border-right: none; }
  .nav-cta-wrap { flex: none; width: 100%; justify-content: flex-start; padding: 12px 20px; }

  .burger {
    display: block;
    position: relative;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .burger-top, .burger-bottom {
    position: absolute;
    height: 2px;
    background: var(--white-warm);
    border-radius: 10px;
    transition: all .45s cubic-bezier(.25, .9, .3, 1);
  }
  .burger-top { width: 30px; top: 16px; left: 14px; }
  .burger-bottom { width: 20px; top: 26.5px; right: 0; }
  .nav.is-open .burger-top { width: 25px; top: 21px; left: 19px; transform: rotate(45deg); }
  .nav.is-open .burger-bottom { width: 25px; top: 21px; right: -1px; transform: rotate(-45deg); }

  /* hero */
  .hero { height: auto; padding: 150px 50px 100px; }
  .hero-container {
    flex: none;
    width: 100%;
    height: auto;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 100px;
  }
  .hero-left {
    flex: none;
    width: 100%;
    max-width: none;
    padding: 0;
    align-items: center;
    gap: 0;
  }
  .hero-avatars { display: none; }
  .hero-cta-desktop { display: none; }
  .hero-cta-mobile { display: block; }
  .hero-h1 {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -0.06em;
    text-align: center;
  }
  .hero-sub {
    flex: none;
    width: 100%;
    max-width: 70%;
    align-items: center;
  }
  .hero-sub > p:not(.hero-claim) { font-size: 30px; padding-top: 24px; text-align: center; }
  .hero-sub > p:not(.hero-claim)::before { left: 50%; transform: translateX(-50%); width: 90px; }
  .hero-claim { max-width: 560px; font-size: 18px; text-align: center; }
  .hero-bg {
    height: 71.2963vh;
    top: calc(51.3314% - 35.6481vh);
  }
}

/* ============ PHONE (≤809.98) ============ */

@media (max-width: 809.98px) {
  .hero { height: 100vh; padding: 200px 20px 150px; }
  .hero-container { gap: 67px; }
  .hero-h1 { font-size: 42px; letter-spacing: -0.05em; }
  .hero-sub { max-width: none; }
  .hero-sub > p:not(.hero-claim) { font-size: 26px; padding-top: 20px; }
  .hero-sub > p:not(.hero-claim)::before { width: 72px; }
  .hero-bg { height: 100%; top: 0; }
}

/* ============================================================
   SECTION 2 — Rechtliche Orientierung (light)
   ============================================================ */

.h2 {
  font-size: 30px;
  line-height: 35.4px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--ink);
}

/* section tag (square + mono label + hairline) */
.tag-wrap { display: flex; flex-direction: column; justify-content: flex-end; }
.tag { display: flex; flex-direction: column; width: 100%; }
.tag-row { display: flex; align-items: center; gap: 10px; margin-top: 2px; height: 21px; }
.tag-square { width: 7px; height: 7px; flex: none; }
.tag-row p {
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.tag-line { width: 100%; height: 1px; }
.tag-light .tag-row { justify-content: center; }
.tag-light .tag-square { background: var(--ink); }
.tag-light .tag-row p { color: var(--ink); }
.tag-light .tag-line { background: rgba(0, 0, 0, 0.1); }
.tag-dark .tag-row { justify-content: flex-start; padding-left: 10px; }
.tag-dark:not(.tag-chip) .tag-row {
  width: fit-content;
  height: 23px;
  margin-top: 0;
  padding: 2px 10px 0;
  background: var(--white-5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.tag-dark .tag-square { background: var(--lime); }
.tag-dark .tag-row p { color: var(--lime); }
.tag-dark .tag-line { background: var(--white-10); }

.sec-ind {
  background: var(--white-warm);
  display: flex;
  flex-direction: column;
  gap: 85px;
}

.ind { padding: 32px; display: flex; flex-direction: column; gap: 50px; }
.ind-head { display: flex; flex-direction: column; gap: 40px; }
.ind-head .tag-wrap { height: 88px; }
.ind-head .h2 { text-align: center; }

/* Vier Schwerpunkte gross vorweg, die uebrigen sieben liegen darunter hinter
   dem Schalter „Alle Rechtsgebiete ansehen" — die Startseite fuehrt damit die
   Kerngebiete, verliert aber kein Rechtsgebiet. */
.ind-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ind-big {
  border: 0;
  margin: 0;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: var(--khaki);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background-color .25s ease, transform .25s ease;
}
.ind-big:hover, .ind-big[aria-expanded="true"] { background: var(--lime); }
.ind-big:hover { transform: translateY(-3px); }
.ind-big-icon { width: 88px; height: 88px; flex: none; padding: 12px; background: var(--black); display: block; }
.ind-big-icon img { width: 100%; height: 100%; object-fit: contain; }
.ind-big-row { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.ind-big-row p {
  flex: 1;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.ind-big[aria-expanded="true"] .ind-chev svg { transform: rotate(180deg); }

.ind-morewrap { display: flex; justify-content: center; }
.ind-more {
  margin: 0;
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(27, 28, 28, 0.22);
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.ind-more:hover { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.ind-more:hover svg path { fill: var(--lime); }
.ind-more svg { flex: none; transition: transform .3s ease; }
.ind-more[aria-expanded="true"] svg { transform: rotate(180deg); }

.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 60px;
  gap: 10px;
}
.ind-card {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 20px;
  padding: 0 20px 0 0;
  background: var(--khaki);
  overflow: hidden;
}
.ind-icon {
  width: 99px;
  height: 60px;
  flex: none;
  padding: 5px 6px;
  background: var(--black);
  display: block;
}
.ind-icon img { width: 100%; height: 100%; object-fit: contain; }
.ind-card p {
  flex: 1;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
}
/* Rechtsgebiete mit eigener Beratungsseite: anklickbar */
a.ind-card { text-decoration: none; transition: background-color 0.25s ease; }
a.ind-card:hover { background: var(--lime); }
.ind-go { flex: none; display: flex; align-items: center; opacity: 0.55; transition: opacity 0.25s ease, transform 0.25s ease; }
a.ind-card:hover .ind-go { opacity: 1; transform: translateX(4px); }

/* question ticker */
.qa {
  padding: 0 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.qa-head { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.qa-head .h2 { text-align: center; }
.qa-head p {
  width: 600px;
  max-width: 100%;
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-align: justify;
}
.qa-ticker {
  width: 810px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.tick-row {
  width: 80%;
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
}
.tick-row:nth-child(2) { width: 100%; }
.tick-move { display: flex; width: max-content; animation: tick-marquee var(--dur, 40s) linear infinite; }
.tick-reverse .tick-move { animation-direction: reverse; }
@keyframes tick-marquee { to { transform: translateX(-50%); } }
.tick-group {
  display: flex;
  gap: 10px;
  padding: 0 10px 0 0;
  margin: 0;
  list-style: none;
}
.tick-group li {
  flex: none;
  padding: 4px 10px;
  background: var(--khaki);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

/* benefits row with dotted dividers */
.divider-h { height: 1px; position: relative; overflow: hidden; }
.divider-h::before { content: ""; position: absolute; inset: 0 0 auto 0; border-top: 2px dotted var(--black-40); }
.divider-v { width: 1px; flex: none; align-self: stretch; position: relative; overflow: hidden; }
.divider-v::before { content: ""; position: absolute; inset: 0 auto 0 0; border-left: 2px dotted var(--black-40); }

.ben2 { display: flex; flex-direction: column; }
.ben2-pad { padding: 0 50px; }
.ben2-row { display: flex; flex-flow: row; gap: 20px; }
.ben2-item {
  flex: 1 0 0;
  width: 1px;
  height: 386px;
  padding: 20px 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ben2-icon img { width: 91px; height: 91px; }
.ben2-text { display: flex; flex-direction: column; gap: 10px; }
.ben2-text h3 {
  margin: 0;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.ben2-text p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.only-tablet { display: none; }

/* ============================================================
   SECTION 3 — Wir sind Negele Rechtsanwälte (dark)
   ============================================================ */

.sec-about {
  background: var(--black);
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}
.about-banner.banner-phone { display: none; }
.about-cont {
  width: 100%;
  max-width: 1600px;
  height: 1221px; /* hard-pinned in the reference (content is ~22px shorter) */
  padding: 0 0 5px;
  display: flex;
  flex-direction: column;
  gap: 100px;
  overflow: hidden;
}
.about-top { display: flex; flex-direction: column; gap: 80px; }
.about-tagblock { display: flex; flex-direction: column; gap: 40px; }
.about-tw { display: flex; flex-flow: row; gap: 137px; align-items: flex-start; }
.about-h2 {
  flex: 1 0 0;
  width: 1px;
  color: var(--white-warm);
}
.about-h2 mark { background: var(--lime); color: var(--ink); }
.about-stb {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.about-stb > p {
  width: 100%;
  font-size: 21px;
  line-height: 27.3px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--white-warm);
}

.about-bens { display: flex; flex-flow: row; align-items: flex-start; gap: 30px; }
.about-ben {
  flex: 1 0 0;
  width: 1px;
  position: relative;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.about-ben::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--white-15); }
.ab-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 4px 8px;
  background: #ffffff0d;
}
.ab-icon { width: 22px; height: 22px; flex: none; display: block; }
.ab-icon svg { width: 100%; height: 100%; fill: var(--lime); display: block; }
.ab-title p {
  flex: 1;
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--lime-soft);
}
.ab-desc {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
}

.about-photo { width: 97%; height: 486.4px; flex: none; overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.about-banner {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  gap: 54px;
  padding: 10px 30px 10px 20px;
  background: var(--lime);
  text-decoration: none;
}
.ab-avatars { display: flex; flex-flow: row; margin-right: -30px; }
.av-light { background: var(--black); transition: background-color .3s ease; }
.about-banner { transition: background-color .3s ease; }
.about-banner .ab-cta p { transition: color .3s ease; }
.about-banner .ab-arrow svg path { transition: fill .3s ease; }
.about-banner:hover { background: var(--black); }
.about-banner:hover .av-light { background: var(--lime); }
.about-banner:hover .ab-cta p { color: var(--lime-soft); }
.about-banner:hover .ab-arrow svg path { fill: var(--lime); }
.ab-cta { display: flex; align-items: center; gap: 10px; }
.ab-cta p {
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
  white-space: pre;
}
.ab-arrow { width: 16px; height: 14px; flex: none; display: block; }
.ab-arrow svg { display: block; image-rendering: pixelated; }
.only-phone { display: none; }

/* ============================================================
   SECTION 4 — Stats (light section, dark panel)
   ============================================================ */

.sec-stats {
  background: var(--white-warm);
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stats-cont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.stats-head { display: flex; flex-direction: column; gap: 40px; }
.stats-h2 { width: 500px; max-width: 100%; text-wrap: balance; }
.stats-h2 span { color: var(--ink); }
.stats-h2 mark { background: var(--black); color: var(--lime); }

.stats-panel {
  background: var(--black);
  padding: 60px 50px;
  display: flex;
  flex-flow: row;
  gap: 9px;
}
.stat {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
}
.stat-body { padding: 20px; display: flex; flex-direction: column; gap: 62px; }
.stat-top { display: flex; flex-direction: column; }
.stat-nas { display: flex; flex-flow: row; align-items: center; gap: 4px; }
.stat-num {
  font-size: 90px;
  line-height: 90px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--lime-soft);
  white-space: nowrap;
}
.stat-suf {
  flex: 1 0 0;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--lime-soft);
}
.stat-top h3 {
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--white-warm);
}
.stat-bullets { display: flex; flex-direction: column; gap: 2px; }
.stat-bullet { display: flex; flex-flow: row; align-items: center; gap: 10px; }
.sb-icon { width: 16px; height: 16px; flex: none; display: block; }
.sb-icon svg { width: 100%; height: 100%; fill: var(--lime); display: block; }
.stat-bullet p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
}

/* ============================================================
   SECTION 5 — Recht haben, ihr Recht durchsetzen (dark)
   ============================================================ */

.sec-recht {
  background: var(--black);
  padding: 100px 50px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.recht-cont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.recht-head { display: flex; flex-direction: column; gap: 40px; }
.recht-hs { display: flex; flex-flow: row; align-items: center; gap: 20px; }
.recht-h2 {
  flex: 1 0 0;
  max-width: 500px;
  font-size: 50px;
  line-height: 59px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--white-warm);
  text-wrap: balance;
}
.recht-h2 mark { background: var(--lime); color: var(--ink); }
.recht-sup { flex: 1 0 0; width: 1px; display: flex; justify-content: flex-end; }
.recht-sup p {
  max-width: 600px;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--white-warm);
  text-align: right;
}

.cmp-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  grid-auto-rows: 200px;
  justify-content: center;
  gap: 30px;
  width: 100%;
  padding: 0 0 50px;
  overflow: hidden;
}
.cmp-row { align-self: start; width: 100%; }
.cmp-point { width: 100%; display: flex; flex-direction: column; }
.cmp-head {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 10px;
  padding: 2px 0 0 10px;
  height: 23px;
}
.cmp-head img { width: 41.91px; height: 21px; flex: none; object-fit: contain; }
.cmp-head p {
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime);
  white-space: pre;
}
.cmp-line { width: 100%; height: 1px; background: var(--white-10); }
.cmp-desc {
  width: 100%;
  background: #ffffff0d;
  padding: 12px 10px;
}
.cmp-desc p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
}

/* ============================================================
   SECTION 6 — Anwälte Team Karten (light)
   ============================================================ */

.sec-team {
  background: var(--white-warm);
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.team-cont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.team-head { display: flex; flex-direction: column; gap: 40px; }
.team-h2 { width: 800px; max-width: 100%; text-wrap: balance; }
.team-h2 mark { background: var(--black); color: var(--lime-soft); }

.team-list { display: flex; flex-direction: column; gap: 60px; padding-bottom: 64px; }

.team-card {
  background: var(--khaki);
  padding: 50px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-decoration: none;
  cursor: pointer;
}
.tc-head { display: flex; flex-flow: row; align-items: center; gap: 24px; }
.tc-icon {
  width: 140px;
  height: 140px;
  padding: 20px;
  flex: none;
  display: block;
  /* dunkle Platte hinter dem handgezeichneten Icon — wie auf der Live-Seite;
     ohne sie schwimmt das Icon frei auf dem Khaki und wirkt verloren */
  background: rgba(27, 28, 28, 0.10);
  transition: padding .5s cubic-bezier(.94, .06, .57, .99);
}
.team-card:hover .tc-icon { padding: 30px; }
.tc-icon img { width: 100%; height: 100%; object-fit: contain; }
.tc-titles { flex: 1 0 0; width: 1px; display: flex; flex-direction: column; gap: 10px; }
.tc-titlewrap { display: flex; flex-direction: column; align-self: flex-start; }
.tc-titlewrap h3 {
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.tc-dash {
  display: block;
  margin: 10px 0 0 -20px;
  width: 14px;
  height: 1px;
  background: var(--black);
  transition: width .5s cubic-bezier(.94, .06, .57, .99);
}
.team-card:hover .tc-dash { width: calc(100% + 20px); }
.tc-desc {
  width: 450px;
  max-width: 100%;
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.tc-body { display: flex; flex-flow: row; align-items: center; gap: 40px; }
.tc-photowrap { flex: 1 0 0; width: 1px; padding: 0 30px; }
.tc-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4725;
  max-height: 420px;
  overflow: hidden;
}
.tc-photo img { width: 100%; height: 100%; object-fit: cover; }
.tc-corner { position: absolute; width: 36px; height: 54px; }
.tc-corner-tl { top: 0; left: 0; }
.tc-corner-br { bottom: 0; right: 0; }
.tc-corner i { position: absolute; width: 18px; height: 18px; background: var(--khaki); }
.tc-corner-tl i:nth-child(1) { top: 0; left: 0; }
.tc-corner-tl i:nth-child(2) { top: 18px; left: 18px; }
.tc-corner-tl i:nth-child(3) { top: 36px; left: 0; }
.tc-corner-br i:nth-child(1) { top: 0; left: 18px; }
.tc-corner-br i:nth-child(2) { top: 18px; left: 0; }
.tc-corner-br i:nth-child(3) { top: 36px; left: 18px; }
.tc-subwrap { flex: 1 0 0; width: 1px; display: flex; flex-direction: column; gap: 29px; }
.tc-subs { display: flex; flex-direction: column; gap: 10px; }
.tc-subrow { padding-left: 10px; }
.tc-subrow p {
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}
.tc-subline { margin-top: 3px; height: 1px; background: rgba(0, 0, 0, 0.2); }
.tc-profile { position: relative; display: flex; flex-flow: row; align-items: center; gap: 10px; align-self: flex-start; overflow: hidden; }
.tc-profile h5 {
  margin: 0;
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.tcp-arrow { width: 16px; height: 14px; flex: none; display: block; }
.tcp-arrow svg { display: block; image-rendering: pixelated; }
.tcp-lines {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  display: flex;
  overflow: hidden;
}
.tcp-lines i {
  flex: 1 0 0;
  height: 1px;
  background: var(--ink);
  transform: translateX(-102%);
  transition: transform .45s cubic-bezier(.25, .9, .3, 1);
}
.tcp-lines i:last-child { transform: translateX(102%); }
.team-card:hover .tcp-lines i { transform: translateX(0); }

/* ============================================================
   SECTION 7 — FAQ (dark)
   ============================================================ */

.sec-faq {
  background: var(--black);
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.faq-cont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.faq-hf { display: flex; flex-flow: row; align-items: flex-start; justify-content: space-between; }
.faq-hw { width: 440px; max-width: 100%; flex: none; padding: 0 40px 0 0; }
.faq-h2 { color: var(--white-warm); }
.faq-list { flex: 1 0 0; width: 1px; display: flex; flex-direction: column; gap: 20px; }

.faq-item {
  background: var(--white-warm);
  display: flex;
  flex-direction: column;
  padding: 35px 0 0;
  transition: padding .4s ease;
}
.faq-item.is-open { padding: 0; }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-clip { overflow: hidden; min-height: 0; }
.faq-answer-pad { padding: 40px 20px 0; display: flex; justify-content: center; }
.faq-box {
  position: relative;
  width: 800px;
  max-width: 100%;
  background: var(--black);
  padding: 20px 20px 40px;
}
.faq-box p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--lime-soft);
}
.faq-atag {
  position: absolute;
  top: -23px;
  right: 0;
  height: 23px;
  padding: 2px 10px 0;
  background: var(--black);
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime-soft);
}
.faq-q {
  position: relative;
  width: 100%;
  background: var(--khaki);
  transition: background-color .3s ease;
  border: none;
  padding: 20px;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.faq-q p {
  flex: 0.95 0 0;
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-family: 'Inter', 'Inter Placeholder', sans-serif;
}
.faq-qicon {
  width: 42px;
  height: 42px;
  flex: none;
  display: block;
}
.faq-qicon svg { width: 100%; height: 100%; fill: var(--black); display: block; transition: transform .4s ease; }
.faq-item.is-open .faq-qicon svg { transform: rotate(-45deg); }
.faq-item.is-open .faq-qtag { background: var(--lime); }
.faq-item.is-open .faq-q { background: var(--lime); }
.faq-qtag {
  position: absolute;
  top: -22px;
  left: 30px;
  height: 23px;
  padding: 2px 10px 0;
  background: var(--khaki);
  transition: background-color .3s ease;
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ============================================================
   FOOTER (dark)
   ============================================================ */

.footer {
  background: var(--black);
  padding: 100px 50px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.f-cont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.f-top { display: flex; flex-direction: column; gap: 70px; }

/* CTA banner */
.f-cta {
  position: relative;
  overflow: hidden; /* clips the crest + corner squares like the reference */
  background: var(--lime);
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 30px 60px 30px 90px;
}
.f-logo {
  position: absolute;
  left: -81px;
  top: -22px;
  bottom: -22px;
  width: 154px;
  display: block;
}
.f-logo img { width: 100%; height: 100%; object-fit: cover; }
.f-cta-text {
  width: 500px;
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.f-cta-btn { flex: none; }
.f-squares { position: absolute; right: 0; top: -19px; width: 36px; height: 54px; display: block; }
.f-squares i { position: absolute; width: 18px; height: 18px; background: var(--black); }
.f-squares i:nth-child(1) { top: 0; left: 18px; }
.f-squares i:nth-child(2) { top: 18px; left: 0; }
.f-squares i:nth-child(3) { top: 36px; left: 18px; }

/* dark button variant */
.btn-dark .btn-text { background: var(--black); }
.btn-dark .btn-text p { color: var(--lime-soft); }
.btn-dark .btn-shine { background: var(--black); }
.btn-dark .btn-arrow { background: var(--black); }
.btn-dark .btn-arrow::after { border-left-color: var(--white-15); }

/* contact blocks */
.f-contact { padding: 30px; display: flex; flex-flow: row; align-items: flex-start; gap: 30px; background: var(--white-5); }
.f-block { flex: 1 0 0; width: 1px; display: flex; flex-direction: column; gap: 20px; }
.f-links { display: flex; flex-direction: column; }
.f-links p, .f-plain {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
}
.f-links a { color: var(--lime-soft); text-decoration: none; }
.f-mail { color: var(--lime); }
.f-time { display: flex; flex-direction: column; gap: 8px; }
.f-time-rows { display: flex; flex-direction: column; }
.f-clock { display: flex; flex-flow: row; align-items: center; gap: 5px; }
.f-clock-dot { width: 7px; height: 7px; background: var(--lime); flex: none; border-radius: 30px; }
.f-clock-box {
  display: block;
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: var(--lime-soft);
  background: #ffffff05;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* nav columns */
.f-nav { display: flex; flex-flow: row; align-items: flex-start; gap: 40px; }
.f-col { flex: 1 0 0; width: 1px; display: flex; flex-direction: column; gap: 15px; }
.f-linklist { display: flex; flex-direction: column; }
.f-link {
  position: relative;
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  text-decoration: none;
  overflow: clip;
}
.f-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-bottom: 1px solid var(--white-15);
  pointer-events: none;
}
.f-link p {
  flex: 1 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
}
.fl-line {
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 14px;
  height: 1px;
  background: var(--lime);
  transition: width .45s cubic-bezier(.25, .9, .3, 1);
}
.f-link:hover .fl-line { width: calc(100% + 20px); }
.fl-icons { position: relative; width: 14px; height: 14px; flex: none; overflow: hidden; display: block; }
.fl-icons svg {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  fill: var(--lime);
  transition: transform .45s cubic-bezier(.25, .9, .3, 1);
}
.fl-icons svg:first-child { left: -14px; }
.fl-icons svg:last-child { left: 0; }
.f-link:hover .fl-icons svg { transform: translateX(14px); }
.f-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 10px; }
.f-legal p { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.02em; }
.f-legal a { color: var(--lime-soft); text-decoration: none; }

.f-bottom { min-height: 78px; }

/* ============================================================
   KANZLEI SUBPAGE — Section About (khaki) + Mission & Vision (dark)
   ============================================================ */

.tag-l1 .tag-row { justify-content: flex-start; padding-left: 10px; }

.ka-about {
  background: var(--khaki);
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ka-cont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}
.ka-top { display: flex; flex-flow: row; }
.ka-top .tag-wrap { flex: 5 0 0; width: 1px; justify-content: flex-start; }
.ka-texts {
  flex: 6 0 0;
  width: 1px;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 39px;
}
.ka-h2 {
  font-size: 50px;
  line-height: 1.18; /* percentage — the inline 50px mark span must inherit the RATIO */
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--ink);
  text-wrap: balance;
}
.ka-h2 mark { background: var(--black); }
.ka-h2 mark span { color: var(--lime-soft); font-size: 50px; }
.ka-texts p {
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.ka-hist { display: flex; flex-direction: column; gap: 40px; }
.kh-ticker { position: relative; padding-top: 70px; overflow: hidden; }
.kh-arrows { position: absolute; top: 0; right: 0; display: flex; gap: 10px; z-index: 1; }
.kh-arrow {
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  background: var(--black);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.kh-arrow svg { display: block; width: 35px; height: 35px; }
.kh-move { display: flex; width: max-content; animation: kh-marquee 49s linear infinite; }
@keyframes kh-marquee { to { transform: translateX(-33.3333%); } }
.kh-off { display: flex; width: max-content; transition: transform .65s cubic-bezier(.22, 1, .36, 1); }
.kh-group { display: flex; flex-flow: row; }
.kt-item { position: relative; width: 530px; height: 262px; flex: none; display: flex; flex-direction: column; }
/* 1px line running under the head row, continuous across items */
.kt-item::before {
  content: '';
  position: absolute;
  top: 55px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--black);
}
.kt-head {
  height: 55px;
  width: min-content;
  flex: none;
  padding: 2px 10px;
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  align-items: flex-start;
  overflow: hidden;
}
.kt-body { flex: none; }
.kt-year, .kt-title {
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: pre;
  color: var(--lime-soft);
}
.kt-div { width: auto; align-self: stretch; height: 1px; background: var(--lime-soft); flex: none; }
.kt-present .kt-head { background: var(--lime); }
.kt-present .kt-year, .kt-present .kt-title { color: var(--ink); }
.kt-present .kt-div { background: var(--ink); }
.kt-body { margin-top: 63px; padding-right: 60px; }
.kt-body p {
  max-width: 400px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ka-mission {
  background: var(--black);
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.km-cont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.km-head { display: flex; flex-direction: column; gap: 40px; }
.km-h2 {
  width: 600px;
  max-width: 100%;
  font-size: 50px;
  line-height: 59px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--white-warm);
}
.km-block { display: flex; flex-flow: row; gap: 10px; }
.km-img { margin-top: 56px; height: 450px; overflow: hidden; position: relative; }
.km-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* like the reference: Mission = photo 1 in front (flex 6), Vision swaps them (1:6) */
.km-img1 { flex: 6 0 0; width: 1px; transition: flex-grow .8s cubic-bezier(.22, 1, .36, 1); }
.km-img2 { flex: 1 0 0; width: 1px; transition: flex-grow .8s cubic-bezier(.22, 1, .36, 1); }
.km-block.is-vision .km-img1 { flex-grow: 1; }
.km-block.is-vision .km-img2 { flex-grow: 6; }
.km-tt { width: 657.5px; flex: none; display: flex; flex-direction: column; }
.km-tabs { display: flex; flex-flow: row; padding-bottom: 10px; }
.km-tab {
  flex: 1 0 0;
  height: 46px;
  padding: 10px 20px;
  border: none;
  background: #ffffff0d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
}
.km-tab p {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--lime-soft);
  font-family: 'Inter', 'Inter Placeholder', sans-serif;
}
.km-tab.is-active { background: var(--lime); }
.km-tab.is-active p { color: var(--ink); }
.km-box {
  height: 450px;
  background: var(--white-warm);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
}
.km-box h3 {
  width: 100%;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.km-list {
  width: 100%;
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.km-list .w { display: inline-block; white-space: nowrap; }
.km-list .l { display: inline-block; }
.km-list.km-swap .l { animation: km-pop .4s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--d, 0s); }
@keyframes km-pop { from { opacity: 0; transform: scale(.8); } }
/* stray leftover element present in the reference (invisible black-on-black, but takes space) */
.km-stray { font-size: 16px; line-height: 19.2px; font-weight: 400; letter-spacing: normal; color: #000; }

/* ---------- kanzlei tag chip (Accent Text draws a translucent fitted chip behind square+label) ---------- */
.tag-chip .tag-row {
  height: 23px;
  margin-top: 0;
  padding: 0;
}
.tag-chip .tag-chipbox {
  width: fit-content;
  height: 23px;
  padding: 2px 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff0d;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.tag-light.tag-chip .tag-chipbox { background: var(--white-warm); }
/* chip already carries the 10px inset — the row itself loses it */
.tag-chip.tag-l1 .tag-row, .tag-dark.tag-chip .tag-row { padding-left: 0; }

/* ---------- Section - Owner's Quote (desktop + tablet only) ---------- */
.ko-quote {
  background: var(--white-warm);
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}
.ko-cont {
  width: 100%;
  max-width: 1600px;
  /* the reference sizes the container by ratio; content forces it taller at tablet */
  aspect-ratio: 2.11538;
  padding: 20px 0 350px 50px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: clip;
}
.ko-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: clip;
  transform: scale(1.1); /* appear zoom start state — animates to 1 in view */
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.ko-quote.is-in .ko-img { transform: none; }
.ko-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ko-card {
  position: relative;
  z-index: 1;
  flex: 1 0 0;
  width: 1px;
  max-width: 400px;
  background: #edebbe99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: clip;
}
.ko-qwrap {
  width: 100%;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: clip;
}
.ko-qwrap p {
  flex: 1 0 0;
  width: 1px;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.ko-name {
  position: relative;
  width: 100%;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: clip;
}
.ko-name::after { content: ""; position: absolute; inset: 0; border-top: 1px solid #222; pointer-events: none; }
.ko-script {
  width: 100%;
  font-family: 'Carattere', cursive;
  font-size: 46px;
  line-height: 36.8px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.ko-since {
  width: 100%;
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Section - Values ---------- */
.kv-values {
  background: var(--black);
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.kv-tagrow { width: 100%; max-width: 1600px; }
.kv-tagrow .tag-wrap { width: 100%; }
.kv-cont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  overflow: clip;
}
.kv-head {
  position: sticky;
  top: 100px;
  z-index: 1;
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.kv-h2, .kv-sup {
  flex: none;
  width: 100%;
  max-width: 600px;
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.kv-h2 {
  font-size: 50px;
  line-height: 59px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--white-warm);
}
.kv-sup {
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--white-warm);
}
.kv-h2 mark, .kv-sup mark { background: var(--lime); }
.kv-h2 mark span, .kv-sup mark span { color: var(--ink); }
.kv-sup strong { font-weight: 700; }
.kv-list {
  flex: 1 0 0;
  width: 1px;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  overflow: clip;
}
.kv-item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  overflow: clip;
}
.kv-letter {
  flex: none;
  align-self: stretch;
  width: 155px;
  background: #ffffff0d;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: clip;
}
.kv-letter p {
  white-space: pre;
  font-size: 80px;
  line-height: 76px;
  font-weight: 600;
  letter-spacing: -5px;
  color: var(--lime-soft);
}
.kv-tt {
  flex: 1 0 0;
  width: 1px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  overflow: clip;
}
.kv-tt .tag-wrap { width: 100%; }
.kv-desc {
  width: 100%;
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--white-warm);
  text-wrap: balance;
}

/* ---------- Section - Hero (kanzlei) ---------- */
.kx-hero {
  background: var(--black);
  padding: 120px 50px 50px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 37px;
  overflow: clip;
}
.kx-cont {
  position: relative;
  flex: 1 0 0;
  width: 1px;
  max-width: 1600px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  overflow: clip;
}
.kx-left {
  flex: 2 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 38px;
  overflow: clip;
}
.kx-headwrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: clip;
}
.kx-h1 {
  width: 100%;
  max-width: 550px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--white-warm);
  text-wrap: balance;
}
.kx-company {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kx-crest { flex: none; width: 22%; aspect-ratio: 1; }
.kx-crest img { display: block; width: 100%; height: 100%; }
.kx-logotype { flex: 1 0 0; width: 1px; display: flex; flex-direction: column; align-items: flex-start; }
.kx-fit { display: block; width: 100%; height: auto; overflow: hidden; }
.kx-fit-t, .kx-fit-p { display: none; }
.kx-fitp {
  margin: 0;
  font-family: 'Inter', 'Inter Placeholder', sans-serif;
  font-weight: 300;
  line-height: 1.1; /* unitless — spans carry their own size */
  letter-spacing: -0.11em;
  color: var(--white-warm);
  white-space: pre;
}
.kx-fit-name { font-weight: 600; color: var(--lime-soft); }
/* desktop/tablet logotype spans carry their own, larger size (the p keeps 81.78) */
.kx-fitp span { letter-spacing: -0.11em; }
.kx-fit-d .kx-fitp span, .kx-fit-t .kx-fitp span { font-size: 96.52572993689276px; }
.kx-video { width: 100%; aspect-ratio: 1.78571; position: relative; }
.kx-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.kx-right {
  position: relative;
  flex: 1 0 0;
  width: 1px;
  max-width: 400px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  padding-left: 30px;
  overflow: clip;
}
.kx-right::after { content: ""; position: absolute; inset: 0; border-left: 1px solid var(--white-15); pointer-events: none; }
.kx-photo { flex: 1 0 0; height: 1px; max-height: 400px; width: 100%; overflow: clip; opacity: 0.9; }
.kx-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kx-sub { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; overflow: clip; }
.kx-sub > p { width: 100%; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--white-warm); white-space: pre-wrap; }
.kx-sub mark { background: var(--white-15); }
.kx-sub mark span { color: var(--lime-soft); }

/* ---------- Section - Team (kanzlei) ---------- */
.chip-khaki .tag-chipbox { background: var(--khaki); }
.chip-ink .tag-chipbox { background: var(--ink); }

.tm-team {
  background: var(--white-warm);
  padding: 100px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.tm-head {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.tm-head .tag-wrap { width: 100%; }
.tm-h2 {
  width: 100%;
  max-width: 800px;
  font-size: 50px;
  line-height: 59px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--ink);
  text-wrap: balance;
}
.tm-list {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  overflow: clip;
}
.tm-card {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 0 0 40px;
  overflow: hidden;
}
.tm-imgname {
  flex: 1 0 0;
  width: 1px;
  max-width: 500px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 23px;
  overflow: clip;
}
.tm-photo { position: relative; flex: none; width: 211px; height: 263px; overflow: clip; }
/* absolute like the reference bg-image wrapper — the image must not size the aspect box */
.tm-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-photo .tm-img-tp { display: none; }
.tm-nri {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  overflow: clip;
}
.tm-nr {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: clip;
}
.tm-nr h3 {
  width: 100%;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.tm-role {
  width: 100%;
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}
.tm-icons { display: flex; align-items: center; gap: 10px; }
.tm-tag-phone { display: none; }
.tm-info {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  overflow: clip;
}
.tm-info .tag-wrap, .tm-nri .tag-wrap { width: 100%; }
.tm-desc {
  width: 100%;
  max-width: 800px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tm-accs {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.tm-acc {
  position: relative;
  width: 100%;
  background: var(--lime);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.tm-acc-details {
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  padding: 20px 20px 0;
  border-radius: 20px;
  transition: top .4s cubic-bezier(.22, 1, .36, 1);
}
.tm-acc:hover .tm-acc-details { top: -10px; }
.tm-det-t, .tm-det-p { display: none; }
.tm-acc.is-open .tm-acc-details { position: static; }
.tm-adw {
  flex: 1 0 0;
  width: 1px;
  max-width: 800px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.tm-adw p, .tm-adw ul {
  flex: 1 0 0;
  width: 1px;
  max-width: 800px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
}
.tm-adw ul { list-style: none; margin: 0; padding: 0; }
.tm-adw li { padding-left: 20.66px; }
.tm-adw li p { width: 100%; flex: none; }
.tm-acc-title {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--khaki);
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: padding .35s cubic-bezier(.22, 1, .36, 1);
}
.tm-acc:hover .tm-acc-title { padding: 10px 20px 10px 26px; }
.tm-acc-title h3 {
  flex: 0.95 0 0;
  width: 1px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.tm-acc-icon { flex: none; width: 42px; height: 42px; border-radius: 13px; display: flex; justify-content: center; align-items: center; }
.tm-acc-icon svg { display: block; width: 24px; height: 24px; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.tm-acc.is-open .tm-acc-icon svg { transform: rotate(-45deg); }
.tm-cta { flex: none; }
.tm-cta .btn-shine { left: -69px; }

/* ---------- Section - Career (kanzlei) ---------- */
.cr-career {
  position: relative;
  background: var(--white-warm);
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
/* the reference draws a thick black frame around the whole section (data-border) */
.cr-career::after { content: ""; position: absolute; inset: 0; border: 15px solid var(--black); pointer-events: none; }
.cr-head {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.cr-head .tag-wrap { width: 100%; }
.cr-h2 {
  width: 100%;
  max-width: 800px;
  font-size: 50px;
  line-height: 59px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--ink);
  text-wrap: balance;
}
.cr-wrap {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  overflow: clip;
}
.cr-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  justify-content: center;
  gap: 20px;
}
.cr-job {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--khaki);
  overflow: clip;
  text-decoration: none;
  cursor: pointer;
}
.cr-texts {
  width: 100%;
  aspect-ratio: 2.25604;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  overflow: clip;
}
.cr-texts h3 {
  white-space: pre;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.cr-info {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 40px 0 0;
  overflow: clip;
}
.cr-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 6px;
  background: var(--white-warm);
  overflow: clip;
}
.cr-chip p {
  white-space: pre;
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}
.cr-bar {
  width: 100%;
  height: 70px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--black);
}
.cr-bar > p {
  white-space: pre;
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime-soft);
}
.cr-bar-icon { flex: none; width: 42px; height: 42px; border-radius: 13px; display: flex; justify-content: center; align-items: center; }
.cr-bar-icon svg { display: block; width: 24px; height: 24px; }

/* ============================================================
   RECHTSANWALT SUBPAGE — Sub-Hero + Services (9 Anwälte)
   ============================================================ */
.tag-center .tag-row { justify-content: center; }

.rh-hero {
  background: var(--black);
  padding: 156px 0 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.rh-cont {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.rh-cont .tag-wrap { width: 100%; }
.rh-hs {
  width: 100%;
  padding: 0 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.rh-h1 {
  width: 100%;
  max-width: 800px;
  font-size: 62px;
  line-height: 62px;
  font-weight: 600;
  letter-spacing: -3.3px;
  color: var(--lime-soft);
  text-align: center;
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word; /* ref breaks long words mid-word at phone (blog h1) */
}
.rh-sub {
  width: 100%;
  max-width: 500px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
  opacity: .8; /* ref RichTextContainer carries opacity:0.8 (blog + rechtsanwalt heroes) */
  text-align: center;
}

.rs-services {
  background: var(--black);
  padding: 0 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rs-inner { width: 100%; max-width: 1600px; }
.rs-list { padding-bottom: 0; }
/* page-scoped card tweaks: icon plate bg + numbered subservices */
.rs-list .tc-icon { background: rgba(0, 0, 0, 0.1); }
.rs-sub { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.rs-subrow { display: flex; align-items: center; gap: 10px; }
.rs-num { flex: none; width: 21px; }
.rs-title { flex: 1 0 0; width: 1px; }
.rs-num, .rs-title {
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}
.rs-line { display: block; width: 100%; height: 1px; background: var(--black-20); }
/* this page's card variant: full-width title wrapper (h3 keeps fit-content) */
.rs-list .tc-titlewrap { align-self: stretch; align-items: flex-start; }
/* and the profile underline sits over the text only, halves parked outside */
.rs-card .tcp-lines { bottom: 1px; width: auto; left: 0; right: 26px; overflow: hidden; }
.rs-card .tcp-lines i { flex: none; position: absolute; top: 0; width: 34px; height: 1px; transform: none; transition: transform .45s cubic-bezier(.25, .9, .3, 1); }
.rs-card .tcp-lines i:first-child { left: -35px; }
.rs-card .tcp-lines i:last-child { left: auto; right: -34px; }
.rs-card:hover .tcp-lines i:first-child { transform: translateX(35px); }
.rs-card:hover .tcp-lines i:last-child { transform: translateX(-35px); }

/* ============================================================
   PROFILE SUBPAGES (rechtsanwalt/<slug>) — Hero + Content
   ============================================================ */
.pf-hero {
  background: var(--white-warm);
  padding: 150px 50px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 31px;
  overflow: hidden;
}
.pf-hero-cont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}
.pf-left {
  flex: none;
  width: calc(50% - 40px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: clip;
}
.pf-left .tag-wrap { width: 100%; }
.pf-titlebox {
  position: relative;
  width: 100%;
  background: var(--khaki);
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  overflow: hidden;
}
.pf-h1 {
  width: 100%;
  max-width: 800px;
  text-wrap: balance;
  word-break: break-word;
  white-space: pre-wrap;
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -0.055em;
  color: var(--ink);
}
.pf-sq { position: absolute; width: 36px; height: 54px; overflow: hidden; }
.pf-sq i { position: absolute; width: 18px; height: 18px; }
.pf-sq-light { left: 0; bottom: 0; }
.pf-sq-light i { background: var(--white-warm); }
.pf-sq-light i:nth-child(1) { top: 0; left: 0; }
.pf-sq-light i:nth-child(2) { top: 18px; left: 18px; }
.pf-sq-light i:nth-child(3) { top: 36px; left: 0; }
.pf-sq-dark { right: -1px; top: 0; }
.pf-sq-dark i { background: var(--black); }
.pf-sq-dark i:nth-child(1) { top: 0; left: 18px; }
.pf-sq-dark i:nth-child(2) { top: 18px; left: 0; }
.pf-sq-dark i:nth-child(3) { top: 36px; left: 18px; }
.pf-overview {
  flex: 1 0 0;
  width: 1px;
  max-width: 800px;
  background: var(--black);
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
  overflow: hidden;
}
.pf-overview > p {
  width: 100%;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--lime-soft);
}

.pf-content {
  background: var(--black);
  padding: 100px 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.pf-cont {
  flex: 1 0 0;
  width: 1px;
  max-width: 1600px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.pf-main {
  flex: 1 0 0;
  width: 1px;
  padding-right: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}
.pf-photo {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1.97694;
  position: relative;
  overflow: hidden;
}
.pf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-pc { position: absolute; overflow: hidden; }
.pf-pc i { position: absolute; background: var(--black); }
.pf-pc-tl { top: 0; left: 0; width: 49px; height: 74px; }
.pf-pc-tl i { width: 24.5px; height: 24.5px; }
.pf-pc-tl i:nth-child(1) { top: 0; left: 0; }
.pf-pc-tl i:nth-child(2) { top: 24.5px; left: 24.5px; }
.pf-pc-tl i:nth-child(3) { top: 49.5px; left: 0; }
.pf-pc-br { right: 0; bottom: 0; width: 36px; height: 54px; }
.pf-pc-br i { width: 18px; height: 18px; }
.pf-pc-br i:nth-child(1) { top: 0; left: 18px; }
.pf-pc-br i:nth-child(2) { top: 18px; left: 0; }
.pf-pc-br i:nth-child(3) { top: 36px; left: 18px; }
.pf-prose-col {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.prose { width: 100%; }
.prose p, .prose h2, .prose h5, .prose li { white-space: pre-wrap; word-break: break-word; }
.prose h2 { font-size: 36px; line-height: 39.6px; font-weight: 600; letter-spacing: -0.05em; color: var(--white-warm); }
.prose h2 strong { font-weight: 900; }
.prose h4, .prose h5, .prose h6 { margin: 0; }
.prose h5 { font-size: 18px; line-height: 25.2px; font-weight: 600; letter-spacing: -0.04em; color: var(--white-warm); }
.prose h5 strong { font-weight: 700; }
.prose p { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--white-warm); }
.prose ul { list-style: none; margin: 20px 0 0; padding: 0; }
.prose li { padding-left: 20.66px; }
.prose blockquote { margin: 20px 0 0; border-left: 2px solid var(--lime-soft); padding: 20px 20px 20px 22px; }
.prose blockquote:first-child { margin-top: 0; }
.prose blockquote p { font-size: 18px; line-height: 25.2px; font-weight: 400; letter-spacing: normal; color: var(--lime-soft); }
.prose > * + * { margin-top: 20px; }
.prose blockquote p + p { margin-top: 20px; }
.prose h5 { margin-top: 40px !important; }
.prose h5:first-child { margin-top: 0 !important; }
.pf-faqbox {
  width: 100%;
  background: #ffffff0d;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.pf-faqbox .tag-wrap { width: 100%; }
.pf-side {
  position: sticky;
  top: 100px;
  flex: 1 0 0;
  width: 1px;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pf-side .tag-wrap { width: 100%; }
.pf-minis {
  width: 100%;
  background: #ffffff0d;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.pf-mini {
  width: 100%;
  padding: 4px 16px 4px 4px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  background: #ffffff0d;
  text-decoration: none;
}
.pf-mini-img { flex: none; width: 70px; aspect-ratio: 1; position: relative; overflow: hidden; display: block; }
.pf-mini-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-mini p {
  flex: 1 0 0;
  width: 1px;
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime-soft);
}

/* stray tag block between main and footer (reference leftover) */
.rx-stray { padding: 64px 50px 0; display: flex; flex-direction: column; gap: 40px; }

/* ============ TABLET (810–1199.98) — sections 2+3 ============ */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .h2 { font-size: 40px; line-height: 47.2px; }
  .ind-top { grid-template-columns: repeat(2, 1fr); }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-card-med { display: none; }
  .qa-head p { font-size: 17px; line-height: 23.8px; }
  .ben2-text h3 { font-size: 20px; line-height: 26px; }
  .only-tablet { display: inline; }
  .not-tablet { display: none; }
  .about-cont { height: auto; }
  .about-photo { height: 486px; }
  .about-stb > p { font-size: 20px; line-height: 26px; }
  .ab-title p { font-size: 17px; line-height: 23.8px; }

  /* stats */
  .stats-panel { flex-direction: column; gap: 42px; }
  .stat { flex: none; width: 100%; }
  .stat-top h3 { font-size: 20px; line-height: 26px; }

  /* recht */
  .recht-h2 { font-size: 40px; line-height: 47.2px; }
  .recht-sup p { font-size: 20px; line-height: 26px; }

  /* team */
  .team-card { padding: 40px; }
  .tc-head { flex-direction: column; align-items: flex-start; }
  .tc-icon { width: 76px; height: 76px; padding: 12px; }
  .team-card:hover .tc-icon { padding: 12px; }
  .tc-titles { flex: none; width: 100%; gap: 18px; }
  .tc-titlewrap h3 { font-size: 26px; line-height: 31.2px; }
  .tc-desc { font-size: 17px; line-height: 23.8px; }
  .tc-body { flex-direction: column; align-items: stretch; }
  .tc-photowrap, .tc-subwrap { flex: none; width: 100%; }

  /* faq */
  .faq-hf { flex-direction: column; gap: 30px; }
  .faq-list { flex: none; width: 100%; gap: 16px; }
  /* padding 0 liess die FRAGE-Fahne (top:-22px) auf der Karte darueber kleben —
     die 30px reservieren ihren Platz wie am Desktop; .is-open setzt sie weiterhin auf 0 */
  .faq-item { padding: 30px 0 0; }
  .faq-q p { font-size: 17px; line-height: 23.8px; }

  /* kanzlei subpage */
  .ka-h2 { font-size: 40px; line-height: 1.18; }
  .kt-item { width: 397.1px; height: 269px; }
  .kt-body { margin-top: 22px; }
  .km-stray { display: none; }
  .km-h2 { font-size: 40px; line-height: 47.2px; }
  .km-img { display: none; }
  .km-tt { width: 100%; flex: 1 0 0; }
  .km-box h3 { font-size: 30px; line-height: 36px; }
  .km-list { font-size: 17px; line-height: 23.8px; }

  /* owner's quote — tablet has an un-run rise appear state (170px) like the reference */
  .ko-quote { padding: 64px 0; transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
  .ko-quote:not(.is-in) { transform: translateY(170px); }
  .ko-cont { padding: 20px 0 120px 50px; }
  .ko-img { bottom: auto; height: 99%; }
  .ko-card { gap: 100px; }

  /* values */
  .kv-values { transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
  .kv-values:not(.is-in) { transform: translateY(170px); }
  .kv-cont { flex-direction: column; }
  .kv-head { flex-direction: row; flex: none; width: 100%; }
  .kv-h2, .kv-sup { flex: 1 0 0; width: 1px; }
  .kv-sup { font-size: 20px; line-height: 26px; text-align: right; }
  .kv-list { flex: none; width: 100%; }
  .kv-letter p { font-size: 60px; line-height: 60px; letter-spacing: -3.6px; }
  .kv-desc { font-size: 17px; line-height: 23.8px; }

  /* kanzlei hero */
  .kx-fit-d { display: none; }
  .kx-fit-t { display: block; }

  /* kanzlei team */
  .tm-h2 { font-size: 40px; line-height: 47.2px; }
  .tm-imgname { flex-direction: column; max-width: 280px; }
  .tm-acc .tm-det-dp { display: none; }
  .tm-acc .tm-det-t { display: flex; }
  .tm-nri { flex: none; width: 100%; }
  .tm-photo .tm-img-d { display: none; }
  .tm-photo .tm-img-tp { display: block; }

  /* profile pages */
  .pf-overview > p { font-size: 20px; line-height: 26px; }
  .prose blockquote p { font-size: 16px; line-height: 22.4px; }
  .pf-cont { flex-direction: column; gap: 60px; }
  .pf-main { flex: none; width: 100%; padding-right: 0; }
  .pf-side { flex: none; width: 100%; max-width: none; }

  /* rechtsanwalt */
  .rs-list .tc-titlewrap h3 { font-size: 30px; line-height: 36px; }
  .rs-list .tc-desc { font-size: 18px; line-height: 25.2px; }

  /* kanzlei career */
  .cr-h2 { font-size: 40px; line-height: 47.2px; }
  .cr-grid { display: flex; flex-direction: column; align-content: flex-start; align-items: flex-start; }
  .cr-job { width: 100%; }
  .cr-texts { aspect-ratio: auto; justify-content: center; }

  /* footer */
  .f-top { gap: 64px; }
  .f-cta-text { width: auto; flex: 1 0 0; font-size: 17px; line-height: 23.8px; }
  .f-contact { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
  .f-block { width: auto; }
  .f-nav { gap: 30px; }
}

/* ============ PHONE (≤809.98) — sections 2+3 ============ */
@media (max-width: 809.98px) {
  .h2 { font-size: 36px; line-height: 39.6px; }
  .sec-ind { gap: 40px; padding: 0 20px 50px; }
  .ind { padding: 10px; gap: 40px; }
  .ind-head .tag-wrap { height: 56px; }
  /* Die Rechtsgebiete waren am Handy ausgeblendet (aus der Framer-Vorlage
     uebernommen). Dadurch stand die Ueberschrift „Unsere Rechtsgebiete" ohne
     Inhalt da, und die Landingpage war am Handy ueber gar keinen Weg mehr
     erreichbar. Eine Spalte, damit auch „Ordnungswidrigkeiten" in eine Zeile passt. */
  /* am Handy legen sich die vier Schwerpunkte flach: Icon links, Titel rechts */
  .ind-top { grid-template-columns: 1fr; gap: 10px; }
  .ind-big { flex-direction: row; align-items: center; gap: 18px; padding: 16px; }
  .ind-big-icon { width: 64px; height: 64px; padding: 9px; }
  .ind-big-row { margin-top: 0; flex: 1; }
  .ind-big-row p { font-size: 18px; }
  .ind-grid { grid-template-columns: 1fr; }
  .qa { display: none; }
  .divider-h { display: none; }
  .ben2-pad { padding: 0; }
  .ben2-row { flex-direction: column; gap: 0; }
  .ben2-item { flex: none; width: 100%; height: auto; justify-content: flex-start; gap: 30px; }
  .divider-v { width: 100%; height: 1px; align-self: auto; }
  .divider-v::before { border-left: none; border-top: 2px dotted var(--black-40); inset: 0 0 auto 0; }
  .ben2-text h3 { font-size: 18px; line-height: 23.4px; }

  .sec-about { padding: 80px 20px; }
  /* the reference keeps the desktop height pin at phone — the photo's bottom is
     clipped and the inner banner is hidden entirely (sibling copy shows instead) */
  .about-cont { gap: 80px; }
  .about-banner.banner-dt { display: none; }
  .about-banner.banner-phone { display: flex; }
  .ab-avatars { margin-right: 0; }
  .about-tw { flex-direction: column; gap: 40px; }
  .about-h2, .about-stb { flex: none; width: 100%; }
  .about-stb > p { font-size: 20px; line-height: 26px; }
  .about-bens { flex-direction: column; }
  .about-ben { flex: none; width: 100%; }
  .ab-title p { font-size: 17px; line-height: 23.8px; }
  .about-photo { width: 100%; height: auto; }
  .about-photo img { height: auto; }
  .about-banner { flex-direction: column; align-items: center; gap: 6px; }
  .only-phone { display: inline; }
  .not-phone { display: none; }

  /* stats */
  .sec-stats { padding: 80px 20px; }
  .stats-cont { gap: 40px; }
  .stats-panel { flex-direction: column; gap: 34px; padding: 60px 20px 40px; }
  .stat { flex: none; width: 100%; }
  .stat-suf { font-size: 30px; }
  .stat-top h3 { font-size: 18px; line-height: 23.4px; }

  /* recht */
  .sec-recht { padding: 64px 20px 20px; }
  .recht-cont { gap: 40px; }
  .recht-hs { flex-direction: column; align-items: flex-start; gap: 10px; }
  .recht-h2 { flex: none; width: 100%; max-width: none; font-size: 36px; line-height: 39.6px; }
  .recht-sup { flex: none; width: 100%; justify-content: flex-start; }
  .recht-sup p { max-width: none; font-size: 20px; line-height: 26px; text-align: left; }
  .cmp-table { grid-template-columns: minmax(50px, 1fr); grid-auto-rows: min-content; }
  .cmp-desc { display: none; }

  /* team */
  .sec-team { padding: 80px 20px; }
  .team-cont { gap: 40px; }
  .team-list { gap: 40px; }
  .team-card { padding: 30px 20px; }
  .tc-head { flex-direction: column; align-items: flex-start; }
  .tc-icon { width: 76px; height: 76px; padding: 12px; }
  .team-card:hover .tc-icon { padding: 12px; }
  .tc-titles { flex: none; width: 100%; gap: 18px; }
  .tc-titlewrap h3 { font-size: 22px; line-height: 30px; }
  .tc-desc { width: 100%; font-size: 17px; line-height: 23.8px; }
  .tc-body { flex-direction: column; align-items: stretch; }
  .tc-photowrap, .tc-subwrap { flex: none; width: 100%; }
  .tc-subs { display: none; }

  /* faq */
  .sec-faq { padding: 80px 20px; }
  .faq-cont { gap: 40px; }
  .faq-hf { flex-direction: column; gap: 40px; }
  .faq-list { flex: none; width: 100%; gap: 16px; }
  /* padding 0 liess die FRAGE-Fahne (top:-22px) auf der Karte darueber kleben —
     die 30px reservieren ihren Platz wie am Desktop; .is-open setzt sie weiterhin auf 0 */
  .faq-item { padding: 30px 0 0; }
  .faq-q p { font-size: 17px; line-height: 23.8px; }

  /* kanzlei subpage */
  .ka-about { padding: 80px 20px; }
  .ka-cont { gap: 80px; }
  .ka-top { flex-direction: column; gap: 40px; }
  .ka-top .tag-wrap { flex: none; width: 100%; }
  .ka-texts { flex: none; width: 100%; padding-left: 0; gap: 40px; }
  .ka-h2 { font-size: 36px; line-height: 1.1; }
  .kt-item { width: 335px; height: 262px; }
  .kt-body { margin-top: 1px; }
  .km-stray { display: none; }
  .ka-mission { padding: 80px 20px; }
  .km-cont { gap: 40px; }
  .km-h2 { font-size: 36px; line-height: 39.6px; }
  .km-img { display: none; }
  .km-tt { width: 100%; flex: none; }
  .km-tab { height: 43.4px; }
  .km-tab p { font-size: 18px; line-height: 23.4px; }
  .km-box h3 { font-size: 30px; line-height: 36px; }
  .km-list { font-size: 17px; line-height: 23.8px; }

  /* kanzlei hero */
  .kx-hero { padding: 120px 20px 50px; }
  .kx-cont { flex-direction: column; }
  .kx-left { flex: none; width: 100%; }
  .kx-fit-d { display: none; }
  .kx-fit-p { display: block; }
  .kx-right { flex: none; width: 100%; max-width: none; align-self: auto; padding: 0; }
  .kx-right::after { display: none; }
  .kx-photo { flex: none; height: 400px; }

  /* kanzlei team */
  .tm-team { gap: 40px; padding: 80px 20px 50px; }
  .tm-h2 { font-size: 36px; line-height: 39.6px; }
  .tm-acc-title h3 { font-size: 18px; line-height: 23.4px; }
  .tm-acc.has-p .tm-det-dp { display: none; }
  .tm-acc.has-p .tm-det-p { display: flex; }
  .tm-card { flex-direction: column; align-items: stretch; }
  .tm-imgname { flex: none; width: 100%; max-width: none; flex-direction: column; }
  .tm-photo { order: 1; width: 100%; height: auto; aspect-ratio: 0.802281; }
  .tm-photo .tm-img-d { display: none; }
  .tm-photo .tm-img-tp { display: block; }
  .tm-nri { flex: none; width: 100%; gap: 23px; }
  .tm-tag-phone { display: flex; }
  .tm-tag-dt { display: none; }
  .tm-info { flex: none; width: 100%; }

  /* profile pages */
  .pf-hero { padding: 130px 20px 80px; }
  .pf-pc-tl { width: 36px; height: 54px; }
  .pf-pc-tl i { width: 18px; height: 18px; }
  .pf-pc-tl i:nth-child(2) { top: 18px; left: 18px; }
  .pf-pc-tl i:nth-child(3) { top: 36px; left: 0; }
  .prose blockquote p { font-size: 16px; line-height: 22.4px; }
  .pf-sq-light { top: 0; bottom: auto; }
  .pf-sq-dark { top: auto; bottom: -1px; right: 2px; width: 54px; height: 36px; }
  .pf-sq-dark i:nth-child(1) { top: 18px; left: 0; }
  .pf-sq-dark i:nth-child(2) { top: 0; left: 18px; }
  .pf-sq-dark i:nth-child(3) { top: 18px; left: 36px; }
  .pf-hero-cont { flex-direction: column; }
  .pf-left { flex: none; width: 100%; }
  .pf-titlebox { gap: 14px; }
  .pf-overview { flex: none; width: 100%; max-width: none; }
  .pf-overview > p { font-size: 20px; line-height: 26px; }
  .pf-content { padding: 80px 20px 0; }
  .pf-cont { flex-direction: column; gap: 60px; }
  .pf-main { flex: none; width: 100%; padding-right: 0; gap: 40px; }
  .pf-faqbox { padding: 40px 20px; }
  .pf-side { flex: none; width: 100%; max-width: none; }
  .pf-minis { padding: 20px; gap: 12px; }

  /* rechtsanwalt */
  .rx-stray { padding: 64px 0 0 20px; }
  .rs-services { padding: 0 20px; }
  .rs-list { gap: 40px; }
  .rs-list .tc-titlewrap h3 { font-size: 30px; line-height: 36px; }
  .rs-list .tc-desc { font-size: 18px; line-height: 25.2px; }
  .rs-subs { display: none; }

  /* kanzlei career */
  .cr-career { gap: 40px; padding: 80px 20px; }
  .cr-h2 { font-size: 36px; line-height: 39.6px; }
  .cr-grid { display: flex; flex-direction: column; align-content: flex-start; align-items: flex-start; }
  .cr-job { width: 100%; }
  .cr-texts { aspect-ratio: auto; justify-content: center; }
  /* white-space:pre stammt aus der Framer-Vorlage und schneidet am Handy
     "Rechtsanwaltsfachangestellte (m/w/d)" und lange Chips einfach ab ->
     mobil normal umbrechen lassen */
  .cr-texts h3 { white-space: normal; }
  .cr-chip p { white-space: normal; }

  /* owner's quote does not exist on phone */
  .ko-quote { display: none; }

  /* values */
  .kv-values { gap: 40px; padding: 80px 20px; }
  .kv-cont { flex-direction: column; }
  .kv-head { position: relative; top: auto; flex: none; width: 100%; gap: 10px; }
  .kv-h2 { line-height: 55px; }
  .kv-sup { font-size: 20px; line-height: 26px; }
  .kv-list { flex: none; width: 100%; }
  .kv-letter { width: 78px; }
  .kv-letter p { font-size: 42px; line-height: 42px; letter-spacing: -2.1px; }
  .kv-desc { font-size: 17px; line-height: 23.8px; }

  /* footer */
  .footer { padding: 80px 20px 40px; }
  .f-cont { gap: 40px; }
  .f-top { gap: 48px; }
  .f-legal { gap: 5px; }
  .f-cta { flex-direction: column; align-items: center; padding: 30px; }
  .f-cta-text { width: 100%; flex: none; font-size: 17px; line-height: 23.8px; }
  .f-logo { left: -124px; }
  .f-contact { flex-direction: column; }
  .f-block { flex: none; width: 100%; }
  .f-nav { flex-direction: column; gap: 40px; }
  .f-col { flex: none; width: 100%; }
}

/* =====================================================================
   BLOG PAGE (blog.html) — hero reuses .rh-*; list below
   ===================================================================== */
.bl-section {
  background: var(--black);
  padding: 0 50px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bl-inner {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.bl-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-auto-rows: min-content;
  justify-content: center;
  gap: 40px 30px;
}
.bl-card {
  place-self: start;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
.bl-top {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.bl-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 10px;
  background: var(--white-10);
}
.bl-chip p {
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime);
  white-space: pre;
}
.bl-imgwrap {
  z-index: 2;
  width: 100%;
  height: 368px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 13px;
  position: relative;
  overflow: hidden;
}
.bl-img {
  z-index: 1;
  flex: 1 0 0;
  width: 100%;
  height: 1px;
  position: relative;
  overflow: hidden;
}
.bl-imgbox {
  z-index: 1;
  position: absolute;
  left: 0;
  top: calc(50% - 184px);
  width: 100%;
  height: 368px;
  transition: top .4s cubic-bezier(.22, 1, .36, 1);
}
.bl-imgbox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.bl-reveal {
  z-index: 1;
  position: absolute;
  bottom: -280px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.bl-card:hover .bl-imgbox { top: calc(50.2793% - 184px); }
.bl-card:hover .bl-reveal {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  width: 100%;
  animation: bl-reveal .45s cubic-bezier(.22, 1, .36, 1);
}
@keyframes bl-reveal { from { opacity: 0; transform: translateY(24px); } }
.bl-exwrap {
  z-index: 3;
  width: 100%;
  max-height: 120px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 0 10px;
  overflow: hidden;
  -webkit-mask: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 66.30633929828265%);
  mask: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 66.30633929828265%);
}
.bl-excerpt {
  flex: 1 0 0;
  width: 1px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
  opacity: .6;
  white-space: pre-wrap;
  word-break: break-word;
}
.bl-more {
  z-index: 2;
  width: 100%;
  height: 70px;
  flex: none;
  background: var(--white-10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  position: relative;
  overflow: clip;
  cursor: pointer;
}
.bl-morelabel {
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime-soft);
  white-space: pre;
}
.bl-moreicon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bl-moreicon svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.bl-more:hover .bl-moreicon svg { transform: rotate(90deg); }
.bl-textwrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 10px 20px 0;
  overflow: hidden;
}
.bl-tc {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bl-title {
  width: 100%;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--white-warm);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}

/* =====================================================================
   BLOG ARTICLE PAGES (blog/<slug>.html) — .bp-*
   ===================================================================== */
.bp-hero {
  background: var(--white-warm);
  height: 100vh;
  max-height: 1200px;
  padding: 123px 50px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.bp-cont {
  flex: 1 0 0;
  height: 1px;
  width: 100%;
  max-width: 1600px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  position: relative;
  overflow: hidden;
}
.bp-text {
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px 0 0;
  overflow: hidden;
}
.bp-heading {
  flex: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}
.bp-title {
  width: 100%;
  max-width: 800px;
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -2.2px;
  color: var(--ink);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.bp-tag .tag-row { justify-content: flex-start; padding-left: 0; }
.tag-chip .tag-chipbox p { white-space: pre; }
.bp-inputwrap { width: 100%; height: 40px; display: flex; flex-direction: column; }
.bp-info {
  flex: none;
  width: min-content;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.bp-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bp-ava {
  flex: none;
  width: 25px;
  height: 25px;
  position: relative;
  overflow: hidden;
}
.bp-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bp-info p {
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: pre;
}
.bp-div {
  flex: none;
  width: 2px;
  height: 15px;
  background: var(--black);
  opacity: .3;
}
.bp-ov {
  flex: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.bp-overview {
  width: 100%;
  max-width: 540px;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.bp-share {
  display: flex;
  align-items: center;
  gap: 18px;
}
.bp-teilen {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--lime-soft);
  border: none;
  border-radius: 0;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1em;
}
.bp-teilen span { font-weight: 600; }
.bp-linkicon {
  flex: none;
  width: 29px;
  height: 31px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.bp-linkicon svg {
  width: 29px;
  height: 32px;
  transform: rotate(-180deg) rotateX(180deg);
}
.bp-imgwrap {
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 40px;
  overflow: hidden;
}
.bp-img {
  flex: 1 0 0;
  width: 100%;
  height: 1px;
  position: relative;
}
.bp-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bp-sq { position: absolute; overflow: hidden; }
.bp-sq i { position: absolute; background: var(--white-warm); aspect-ratio: 1; width: 50%; }
.bp-sq i:nth-child(1) { top: 0; left: 0; }
.bp-sq i:nth-child(2) { top: 50%; right: 0; transform: translateY(-50%); }
.bp-sq i:nth-child(3) { bottom: 0; left: 0; }
.bp-sq-tl { top: 0; left: 0; width: 72px; height: 108px; }
.bp-sq-br { bottom: 0; right: 0; width: 36px; height: 54px; transform: rotate(180deg); }

.bp-content {
  background: var(--black);
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bp-ccont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
}
.bp-article {
  flex: 1 0 0;
  width: 1px;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.bp-prose {
  width: 100%;
  max-width: 800px;
  white-space: pre-wrap;
  word-break: break-word;
}
.bp-prose h3 {
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--white-warm);
}
.bp-prose h3 strong { font-weight: 700; }
.bp-prose p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
}
.bp-prose p strong { font-weight: 700; }
.bp-prose em { font-style: italic; }
.bp-prose > *:not(:first-child) { margin-top: 20px; }
.bp-prose > h3:not(:first-child) { margin-top: 40px; }
.bp-prose ul { padding: 0; margin-bottom: 0; position: relative; list-style: none; }
.bp-prose li { padding-inline-start: 2ch; list-style: none; position: relative; }
.bp-prose li::before { content: "\2022"; position: absolute; inset-inline-start: 0; color: var(--white-warm); font-size: 16px; line-height: 24px; font-weight: 500; }
.bp-prose li p { margin: 0; }
.bp-prose blockquote {
  margin: 0;
  background: var(--white-5);
  border-left: 2px solid var(--lime);
  padding: 20px 20px 20px 22px;
  position: relative;
}
.bp-prose blockquote::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--lime-soft);
}
.bp-prose blockquote p {
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: var(--lime-soft);
  margin: 0;
}
.bp-an {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.bp-about {
  width: 100%;
  max-width: 800px;
  background: var(--white-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 40px;
  overflow: hidden;
}
.bp-abouttexts {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.bp-abouttexts .tag-wrap { width: 100%; }
.bp-aboutp {
  width: 100%;
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--white-warm);
}
.bp-authrow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}
.bp-authimg {
  flex: none;
  width: 102px;
  height: 102px;
  position: relative;
  overflow: hidden;
}
.bp-authimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bp-authnames {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bp-authname {
  width: 100%;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--lime-soft);
  opacity: .8;
}
.bp-authrole {
  width: 100%;
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white-warm);
  opacity: .8;
}
.bp-news {
  width: 100%;
  background: var(--white-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  overflow: hidden;
}
.bp-newsrow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 30px;
  overflow: hidden;
}
.bp-newstext {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bp-newstext h4 {
  margin: 0;
  width: 100%;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lime-soft);
}
.bp-newstext p {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
  opacity: .8;
  text-wrap: balance;
}
.bp-form {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  overflow: hidden;
}
.bp-input {
  width: 100%;
  height: 40px;
  background: var(--white-5);
  border: 1px solid var(--white-15);
  padding: 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--lime-soft);
  border-radius: 0;
}
.bp-input::placeholder { color: rgba(255,255,255,.5); }
.bp-input:focus { outline: none; border-color: var(--lime); }
.bp-submit {
  width: 100%;
  height: 40px;
  background: var(--lime);
  border: 0;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.bp-submit p {
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: pre;
}

.bp-other {
  background: #ffffff05;
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}
.bp-ocont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  overflow: hidden;
}
.bp-ohead {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.bp-ohb {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  overflow: hidden;
}
.bp-oh2 {
  flex: 1 0 0;
  width: 1px;
  max-width: 600px;
  font-size: 50px;
  line-height: 59px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--white-warm);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.bp-olist {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.bp-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(340px, 1fr));
  grid-auto-rows: min-content;
  justify-content: center;
  gap: 40px 30px;
}
.bp-grid-t { display: none; }
.bl-badge {
  z-index: 4;
  position: absolute;
  top: 38px;
  right: 10px;
  width: 40px;
  height: 40px;
  padding: 3px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  background: var(--black-20);
  border: 1px solid var(--white-15);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  overflow: hidden;
}
.bl-badge svg { flex: none; width: 16px; height: 16px; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .bp-cont { gap: 40px; }
  .bp-imgwrap { justify-content: flex-start; }
  .bp-ccont { flex-direction: column; align-items: center; gap: 40px; }
  .bp-article { flex: none; width: 100%; }
  .bp-about { gap: 30px; padding: 20px; }
  .bp-authimg { width: 150px; height: 150px; }
  .bp-overview { font-size: 20px; line-height: 26px; }
  .bp-prose h3 { font-size: 20px; line-height: 26px; }
  .bp-prose blockquote p { font-size: 16px; line-height: 22.4px; }
  .bp-oh2 { max-width: 490px; font-size: 40px; line-height: 47.2px; }
  .bp-grid { display: none; }
  .bp-grid-t { display: grid; grid-template-columns: repeat(2, minmax(340px, 1fr)); }
}
@media (max-width: 809.98px) {
  .bp-hero { height: auto; max-height: none; padding: 130px 20px 80px; }
  .bp-cont { flex: none; height: auto; flex-direction: column; }
  .bp-text { flex: none; justify-content: flex-start; gap: 40px; width: 100%; height: auto; padding: 0; }
  .bp-share { width: 100%; }
  .bp-imgwrap { flex: none; width: 100%; height: 278px; gap: 30px; }
  .bp-sq-tl { width: 36px; height: 54px; }
  .bp-content { padding: 80px 20px; }
  .bp-ccont { flex-direction: column; align-items: center; gap: 40px; }
  .bp-article { flex: none; width: 100%; }
  .bp-about { padding: 40px 20px; }
  .bp-authimg { flex: 1 0 0; width: 1px; height: auto; aspect-ratio: 1; }
  .bp-news { padding: 40px 20px; }
  .bp-newsrow { flex-direction: column; }
  .bp-newstext { flex: none; width: 100%; }
  .bp-form { flex: none; width: 100%; }
  .bp-overview { font-size: 20px; line-height: 26px; }
  .bp-prose h3 { font-size: 18px; line-height: 23.4px; }
  .bp-prose blockquote p { font-size: 16px; line-height: 22.4px; }
  .bp-other { padding: 80px 20px; }
  .bp-ohb { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 40px; }
  .bp-oh2 { flex: none; width: 100%; max-width: 600px; font-size: 36px; line-height: 39.6px; }
  .bp-grid { display: flex; flex-flow: column wrap; place-content: flex-start; align-items: flex-start; }
  .bp-grid.bp-grid-t { display: none; }
  .bp-grid .bl-card { width: 367px; }
}

/* =====================================================================
   ERFOLGE PAGE (erfolge.html) — hero reuses .rh-*; case cards .ef-*
   ===================================================================== */
.ef-section {
  background: var(--black);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 50px;
  overflow: hidden;
}
.ef-inner {
  flex: 1 0 0;
  width: 1px;
  max-width: 1600px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.ef-list {
  flex: 1 0 0;
  width: 1px;
  min-width: 310px;
  display: flex;
  flex-direction: column;
  gap: 110px 0;
}
.ef-card {
  width: 100%;
  height: 478px;
  background: var(--black);
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: clip;
}
.ef-left {
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  background: var(--khaki);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  overflow: clip;
}
.ef-ts {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  padding: 20px;
}
.ef-title {
  width: 100%;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.ef-services {
  width: 100%;
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.ef-nums {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.ef-num {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  overflow: clip;
}
.ef-num-top::after {
  content: "";
  position: absolute;
  inset: 0;
  border-bottom: 1px solid var(--black-20);
  pointer-events: none;
}
.ef-num-bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid var(--white-15);
  pointer-events: none;
}
.ef-numh {
  width: 100%;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.ef-numl {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--black);
  white-space: pre-wrap;
  word-break: break-word;
}
.ef-imgwrap {
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  position: relative;
  overflow: clip;
}
.ef-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 0.985782;
  height: 117%;
  overflow: clip;
  filter: brightness(0.55) blur(5px);
  -webkit-filter: brightness(0.55) blur(5px);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.ef-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ef-card:hover .ef-img { transform: translate(-50%, -50%) scale(1.05); }
.ef-logo {
  position: absolute;
  width: 147px;
  height: 71px;
  top: calc(50.0882% - 35.5px);
  left: calc(50.1873% - 73.5px);
}
.ef-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.ef-right {
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  background: var(--white-5);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  overflow: clip;
}
.ef-right::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--white-15);
  pointer-events: none;
}
.ef-texts {
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  background: var(--white-5);
  display: flex;
  flex-direction: column;
  overflow: clip;
}
.ef-quotebox {
  flex: 1 0 0;
  height: 1px;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.ef-quote {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.ef-client {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.ef-clientimg {
  flex: none;
  width: 70px;
  height: 70px;
  position: relative;
  overflow: hidden;
}
.ef-clientimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ef-clientinfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ef-clientname {
  width: 100%;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--white-warm);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.ef-clientrole {
  width: 100%;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.ef-more-p { display: none; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .ef-inner { max-width: none; }
  .ef-right { display: none; }
}
@media (max-width: 809.98px) {
  .ef-section { padding: 0 20px 20px; }
  .ef-list { gap: 60px 0; }
  .ef-card { height: auto; flex-direction: column; }
  .ef-imgwrap { order: 0; flex: none; width: 100%; height: 284px; }
  .ef-img {
    top: -8.58818%;
    left: 0;
    transform: none;
    aspect-ratio: auto;
    width: 100%;
  }
  .ef-card:hover .ef-img { transform: none; }
  .ef-left { order: 1; flex: none; width: 100%; height: auto; justify-content: center; }
  .ef-right { display: none; }
  .ef-more-p { display: block; order: 3; flex: none; width: 100%; height: 70px; }
}

/* =====================================================================
   ERFOLGE CASE DETAIL PAGES (erfolge/<slug>.html) — .ed-*
   ===================================================================== */
.ed-hero {
  background: var(--white-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 130px 50px 100px;
}
.ed-tagwrap { width: 100%; max-width: 1600px; }
.ed-cont {
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 60px;
  position: relative;
  overflow: hidden;
}
.ed-hd {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
.ed-headwrap {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
}
.ed-h1 {
  width: 100%;
  font-size: 62px;
  line-height: 100%;
  font-weight: 600;
  letter-spacing: -3.3px;
  color: var(--ink);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.ed-data {
  z-index: 1;
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 10px 0 0;
  border-radius: 10px;
}
.ed-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px 0 0;
}
.ed-label {
  width: 100%;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.ed-label mark { background: var(--khaki); color: inherit; }
.ed-value {
  width: 100%;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.ed-item-h {
  flex-direction: row;
  align-items: center;
}
.ed-item-h .ed-label {
  width: auto;
  min-width: 130px;
  white-space: pre;
  font-family: 'Red Hat Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ed-item-h .ed-value {
  flex: 1 0 0;
  width: 1px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
}
.ed-item-t { display: none; }
.ed-it {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 60px;
  overflow: hidden;
}
.ed-img {
  flex: 1 0 0;
  width: 1px;
  height: 521px;
  position: relative;
  overflow: hidden;
}
.ed-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-img .bp-sq i { background: var(--white-warm); }
.ed-sq-br { bottom: 0; right: 0; width: 72px; height: 108px; transform: rotate(180deg); }
.ed-sq-tl { top: 0; left: 0; width: 36px; height: 54px; }
.ed-ov {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  overflow: clip;
}
.ed-overview {
  width: 100%;
  max-width: 1000px;
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.ed-testi {
  width: 100%;
  max-width: 1440px;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 46px;
  overflow: hidden;
}
.ed-client {
  width: 100%;
  background: var(--white-10);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px 0 0;
  overflow: clip;
}
.ed-clientimg {
  flex: none;
  width: 95px;
  height: 95px;
  position: relative;
  overflow: clip;
}
.ed-clientimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-clientnames {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
}
.ed-clientname {
  width: 100%;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--lime-soft);
  white-space: pre-wrap;
  word-break: break-word;
}
.ed-clientrole {
  width: 100%;
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime-soft);
  opacity: .8;
  white-space: pre-wrap;
  word-break: break-word;
}
.ed-quotewrap {
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 20px;
  overflow: hidden;
}
.ed-quote {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--lime-soft);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}

.ed-content {
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 100px 50px;
}
.ed-ccont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}
.ed-block {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.ed-block .bp-prose {
  flex: 1 0 0;
  width: 1px;
  max-width: 800px;
}
.ed-imgs {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  justify-content: start;
  gap: 10px;
}
.ed-cimg {
  aspect-ratio: 1;
  width: 100%;
  place-self: start;
  position: relative;
  display: block;
}
.ed-cimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ed-other {
  background: var(--white-warm);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 100px 50px;
  overflow: hidden;
}
.ed-ocont {
  flex: 1 0 0;
  width: 1px;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.ed-ohead {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.ed-oh2 {
  width: 100%;
  max-width: 800px;
  font-size: 50px;
  line-height: 59px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--ink);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.ed-ocont .ef-list { flex: none; width: 100%; }

/* prose extensions for case pages */
.bp-prose h2 {
  font-size: 36px;
  line-height: 39.6px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--white-warm);
}
.bp-prose > h2:not(:first-child) { margin-top: 40px; }
.bp-prose blockquote ul { margin-top: 20px; }
.bp-prose blockquote li, .bp-prose blockquote li::before {
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: var(--lime-soft);
}
.bp-prose blockquote li p {
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: var(--lime-soft);
}
.bp-prose blockquote strong { font-style: normal; font-weight: 700; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .ed-hd, .ed-it { flex-direction: column; }
  .ed-headwrap, .ed-img, .ed-ov { flex: none; width: 100%; }
  .ed-h1 { font-size: 50px; letter-spacing: -3.3px; }
  .ed-data {
    flex: none;
    width: 100%;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(3, minmax(50px, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-items: unset;
  }
  .ed-item-1 { order: 0; place-self: start; }
  .ed-item-2 { order: 1; place-self: start; }
  .ed-item-3 { order: 2; place-self: start; }
  .ed-item-4 { order: 4; place-self: start; }
  .ed-item-h { display: none; }
  .ed-item-t { display: flex; }
  .ed-overview { max-width: none; font-size: 17px; line-height: 23.8px; }
  .ed-clientname { font-size: 20px; line-height: 26px; }
  .ed-ccont { align-items: flex-start; }
  .bp-prose blockquote li, .bp-prose blockquote li::before, .bp-prose blockquote li p { font-size: 16px; line-height: 22.4px; }
  .ed-block .bp-prose { max-width: none; }
  .ed-cimg { aspect-ratio: 1; }
  .ed-ocont { max-width: none; }
  .ed-oh2 { font-size: 40px; line-height: 47.2px; }
}
@media (max-width: 809.98px) {
  .ed-hero { gap: 40px; padding: 110px 20px 80px; }
  .ed-cont { align-items: flex-start; gap: 40px; }
  .ed-hd, .ed-it { flex-direction: column; }
  .ed-headwrap, .ed-ov { flex: none; width: 100%; }
  .ed-h1 { font-size: 42px; letter-spacing: -2.3px; }
  .ed-data { flex: none; width: 100%; padding: 0; }
  .ed-img { flex: none; width: 100%; height: 220px; }
  .ed-sq-br { width: 36px; height: 55px; }
  .ed-sq-br i, .ed-sq-tl i { width: 18px; }
  .ed-overview { max-width: none; font-size: 17px; line-height: 23.8px; }
  .ed-testi { gap: 30px; }
  .ed-clientname { font-size: 20px; line-height: 26px; }
  .ed-content { gap: 0; padding: 80px 20px 60px; }
  .ed-ccont { gap: 60px; }
  .ed-imgs { display: flex; flex-direction: column; align-items: center; }
  .ed-other { padding: 80px 20px; }
  .ed-oh2 { font-size: 36px; line-height: 39.6px; }
  .bp-prose blockquote li, .bp-prose blockquote li::before, .bp-prose blockquote li p {
    font-size: 16px;
    line-height: 22.4px;
  }
  /* detail-page recirc cards keep the DESKTOP card layout at all widths (ref ships only that variant) */
  .ed-ocont .ef-list { gap: 110px 0; }
  .ef-card-static { height: 478px; flex-direction: row; }
  .ef-card-static .ef-left { order: 0; flex: 1 0 0; width: 1px; height: 100%; justify-content: space-between; }
  .ef-card-static .ef-imgwrap { order: 0; flex: 1 0 0; width: 1px; height: 100%; }
  .ef-card-static .ef-img {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 0.985782;
    height: 117%;
    width: auto;
  }
  .ef-card-static .ef-more-p { display: none; }
}
@media (max-width: 1199.98px) {
  .ef-card-static .ef-right { display: flex; }
}

/* =====================================================================
   KARRIERE PAGE (karriere.html) — hero .rh-*; jobs reuse .cr-*; benefits .kb-*
   ===================================================================== */
.kr-career {
  background: var(--white-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 100px 50px;
}
.kr-cont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  overflow: clip;
}
.kr-head .tag-wrap { width: 100%; }
.kr-head {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.kr-benefits {
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 100px 50px;
}
.kb-grid {
  width: 100%;
  display: grid;
  grid-template-rows: repeat(3, 170px);
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  grid-auto-rows: 170px;
  justify-content: center;
  gap: 10px;
}
.kb-cell {
  place-self: start;
  width: 100%;
  height: 100%;
}
.kb-item {
  width: 100%;
  height: 100%;
  background: var(--white-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 20px;
}
.kb-ih {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border-radius: 13px;
}
.kb-icon {
  flex: none;
  width: min-content;
  background: var(--white-10);
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.kb-icon svg { display: block; width: 26px; height: 26px; }
.kb-item h3 {
  flex: none;
  width: 100%;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--lime-soft);
  text-align: center;
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.kb-h2 { color: var(--white-warm); }

@media (min-width: 810px) and (max-width: 1199.98px) {
  /* frozen appear-state like kanzlei Quote/Values: static ref shows translateY(170px) at tablet */
  .kr-career { transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
  .kr-career:not(.is-in) { transform: translateY(170px); will-change: transform; }
  /* karriere job cards keep the DESKTOP layout at tablet (unlike kanzlei) */
  .kr-career .cr-texts { aspect-ratio: 2.25604; justify-content: space-between; }
  .kb-grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); }
  .kb-item h3 { font-size: 20px; line-height: 26px; }
}
@media (max-width: 809.98px) {
  .kr-career { gap: 40px; padding: 80px 20px; }
  .kr-benefits { padding: 80px 20px; }
  .kb-grid { display: flex; flex-direction: column; align-items: center; }
  .kb-cell { height: auto; }
  .kb-item { height: 123px; }
  .kb-item h3 { font-size: 18px; line-height: 23.4px; }
}

/* =====================================================================
   JOB DETAIL PAGES (karriere/<slug>.html) — .jb-*
   ===================================================================== */
.jb-hero {
  background: var(--white-warm);
  height: 100vh;
  max-height: 1000px;
  padding: 123px 50px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.jb-cont {
  flex: 1 0 0;
  height: 1px;
  width: 100%;
  max-width: 1600px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  position: relative;
}
.jb-imgwrap {
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.jb-img {
  flex: 1 0 0;
  width: 100%;
  height: 1px;
  position: relative;
}
.jb-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.jb-sq-tl { top: 0; left: 0; width: 72px; height: 108px; }
.jb-sq-br { bottom: 0; right: 0; width: 36px; height: 54px; transform: rotate(180deg); }
.jb-text {
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px 0 0;
}
.jb-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  overflow: hidden;
}
.jb-title {
  width: 100%;
  max-width: 800px;
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: var(--ink);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.jb-ov {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  overflow: clip;
}
.jb-ovp {
  width: 100%;
  max-width: 540px;
  font-size: 22px;
  line-height: 28.6px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.jb-content {
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 100px 40px;
}
.jb-ccont {
  width: 100%;
  max-width: 1600px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 47px;
}
.jb-details {
  flex: 1 0 0;
  width: 1px;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 43px;
  overflow: hidden;
}
.jb-details .bp-prose { width: 100%; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .jb-hero { height: auto; max-height: none; }
  .jb-cont { flex: none; height: auto; flex-direction: column; gap: 40px; }
  .jb-imgwrap { flex: none; order: 1; width: 100%; height: auto; aspect-ratio: 1.77945; justify-content: flex-start; }
  .jb-img > img { object-position: 74% 29%; }
  .jb-text { flex: none; order: 0; width: 100%; height: auto; justify-content: flex-start; gap: 10px; padding: 0; }
  .jb-ovp { font-size: 20px; line-height: 26px; }
  .jb-ccont { justify-content: flex-start; gap: 40px; }
}
@media (max-width: 809.98px) {
  .jb-hero { height: auto; max-height: none; padding: 130px 20px 80px; }
  .jb-cont { flex: none; height: auto; flex-direction: column; gap: 30px; }
  .jb-imgwrap { flex: none; order: 1; width: 100%; height: auto; aspect-ratio: 1.25899; gap: 30px; }
  .jb-sq-tl { width: 36px; height: 54px; }
  .jb-text { flex: none; order: 0; width: 100%; height: auto; justify-content: flex-start; gap: 20px; padding: 0; }
  .jb-heading { gap: 14px; }
  .jb-ovp { font-size: 20px; line-height: 26px; }
  .jb-content { gap: 40px; padding: 50px 20px 30px; }
  .jb-ccont { flex-direction: column; align-items: center; gap: 40px; padding: 0 0 20px; }
  .jb-details { flex: none; width: 100%; align-items: center; }
}

/* =====================================================================
   KONTAKT PAGE (kontakt.html) — hero .rh-* (+.ko-hero); form .kf-*; info .ki-*
   ===================================================================== */
.kf-section {
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  padding: 0 50px 100px;
  overflow: hidden;
}
.kf-cont {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  overflow: hidden;
}
.kf-wrap {
  width: 100%;
  max-width: 640px;
  background: var(--khaki);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 50px 30px;
  overflow: hidden;
}
.kf-form {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  overflow: hidden;
}
.kf-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}
.kf-row1 { gap: 12px; }
.kf-field {
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.kf-label {
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: pre;
}
.kf-input {
  width: 100%;
  height: 50px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--black-20);
  border-radius: 0;
  padding: 10px 12px 10px 0;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
}
.kf-input::placeholder { color: rgba(0, 0, 0, 0.4); }
.kf-input:focus { outline: none; border-bottom-color: var(--black); }
select.kf-input { appearance: auto; padding: 10px 0; }
.kf-msg { flex: none; width: 100%; gap: 12px; }
/* Datenschutz-Hinweis direkt am Absende-Knopf (Art. 13 DSGVO: Information zum
   Zeitpunkt der Erhebung, nicht erst im Fussbereich) */
.kf-privacy {
  width: 100%;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: rgba(0, 0, 0, 0.6);
}
.kf-privacy a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.lp-formsec .kf-privacy, .lpf-form .kf-privacy { color: rgba(0, 0, 0, 0.62); }
.kf-textarea {
  width: 100%;
  height: 96px;
  background: none;
  border: 1px solid var(--black-20);
  border-radius: 0;
  padding: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
  resize: vertical;
}
.kf-textarea::placeholder { color: rgba(0, 0, 0, 0.4); }
.kf-textarea:focus { outline: none; border-color: var(--black); }
.kf-btnwrap {
  width: 100%;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(1, minmax(50px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  justify-content: center;
  gap: 10px;
  padding: 10px 0 0;
}
.kf-captcha { place-self: start; width: 100%; min-height: 68px; position: relative; }

/* ===== 2-step contact form (Relaunch 2026-07) ===== */
.kf-form { position: relative; }
.kf-progress { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.kf-steplabel {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Red Hat Mono', monospace;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}
.kf-steptime { color: rgba(0, 0, 0, 0.45); }
.kf-bar { width: 100%; height: 3px; background: rgba(0, 0, 0, 0.12); }
.kf-bar-fill {
  display: block;
  width: 50%;
  height: 100%;
  background: var(--ink);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.kf-step { width: 100%; display: none; flex-direction: column; align-items: flex-start; gap: 30px; }
.kf-step.is-active { display: flex; animation: kf-step-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes kf-step-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}
.kf-hint { font-size: 14px; line-height: 21px; letter-spacing: -0.02em; color: rgba(0, 0, 0, 0.55); }
.kf-err { display: none; font-size: 13px; line-height: 18px; letter-spacing: -0.01em; color: #a3271e; }
.kf-field.is-invalid .kf-input { border-color: #a3271e; }
.kf-field.is-invalid .kf-err { display: block; }
.kf-backbtn {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  justify-self: start;
  font-family: 'Red Hat Mono', monospace;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: underline;
  color: rgba(0, 0, 0, 0.55);
}
.kf-backbtn:hover { color: var(--ink); }
.kf-senderr { display: none; font-size: 14px; line-height: 21px; letter-spacing: -0.02em; color: #a3271e; }
.kf-senderr a { color: #a3271e; font-weight: 600; }
.kf-form.is-senderr .kf-senderr { display: block; }
.kf-submit[disabled] { opacity: 0.6; cursor: default; }
.kf-hpwrap { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kf-success { width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 10px 0 20px; }
.kf-success h3 { font-size: 22px; line-height: 28.6px; font-weight: 600; letter-spacing: -0.04em; color: var(--ink); }
.kf-success p { font-size: 16px; line-height: 24px; letter-spacing: -0.02em; color: var(--ink); }
.kf-success a { color: var(--ink); font-weight: 600; }
.kf-submitwrap { place-self: start; width: 100%; height: 50px; }
.kf-submit {
  width: 100%;
  height: 100%;
  background: var(--lime);
  border: 0;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.kf-submit p {
  font-size: 18px;
  line-height: 25.2px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: pre;
}

.ki-section {
  z-index: 1;
  background: var(--khaki);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 100px 50px;
}
.ki-wrap {
  width: 100%;
  max-width: 1600px;
  background: #ffffff0d;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}
.ki-grid {
  flex: 1 0 0;
  width: 1px;
  border-radius: 10px;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  justify-content: center;
  gap: 8px;
}
.ki-cell {
  place-self: start;
  width: 100%;
  height: 100%;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 30px 20px;
  overflow: hidden;
}
.ki-cell-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  overflow: hidden;
}
.ki-cell-inner .tag-wrap { width: 100%; }
.ki-texts {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ki-p {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
}
.ki-p a {
  color: var(--lime-soft);
  text-decoration: none;
  transition: color .3s cubic-bezier(.44, 0, .56, 1);
}
.ki-p a:hover { color: var(--lime); text-decoration: underline; }
.ki-addr { max-width: 280px; }
.ki-map {
  grid-area: span 2 / span 2;
  place-self: start;
  width: 100%;
  height: 100%;
  background: #ffffff0d;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  overflow: hidden;
}
.ki-mapbox {
  flex: 1 0 0;
  width: 100%;
  height: 1px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
}
.ki-mapbox iframe { width: 100%; height: 100%; border: 0; }
.ki-hours {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ki-clockrow {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ki-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 30px;
  background: var(--lime);
}
.ki-clock {
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ki-clock span {
  color: var(--lime-soft);
  font-size: 19px;
  line-height: 1em;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ki-socgrid {
  width: 100%;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  justify-content: center;
  gap: 6px;
}
.ki-soc {
  width: min-content;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 20px 10px 0;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}
.ki-socicon {
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--white-10);
  display: flex;
  justify-content: center;
  align-items: center;
}
.ki-socicon svg { display: block; width: 26px; height: 26px; transition: width .3s, height .3s; }
.ki-soc:hover .ki-socicon svg { width: 32px; height: 32px; }
.ki-soclabel {
  font-family: 'Red Hat Mono', monospace;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--lime-soft);
  white-space: pre;
}

@media (max-width: 1199.98px) {
  /* kontakt hero ships its Phone variant at tablet AND phone: heading pad 0 20 */
  .ko-hero .rh-hs { padding: 0 20px; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .ki-wrap { flex-direction: column; gap: 20px; }
  .ki-grid { flex: none; width: 100%; grid-template-columns: repeat(2, minmax(200px, 1fr)); }
  .ki-c1 { order: 0; }
  .ki-c5 { order: 1; }
  .ki-c2 { order: 2; }
  .ki-c6 { order: 3; }
  .ki-c3 { order: 4; grid-column: span 2; }
  .ki-map { order: 5; }
}
@media (max-width: 809.98px) {
  .kf-section { padding: 0 20px 80px; }
  .kf-cont { gap: 30px; }
  .kf-row, .kf-row1 { flex-direction: column; gap: 30px; }
  .kf-row1 { gap: 16px; }
  .kf-field { flex: none; width: 100%; }
  .ki-section { padding: 80px 20px; }
  .ki-wrap { flex-direction: column; gap: 20px; }
  .ki-grid { flex: none; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
  .ki-cell { align-self: unset; height: min-content; }
  .ki-c1 { order: 0; }
  .ki-c2 { order: 1; }
  .ki-c3 { order: 2; }
  .ki-c5 { order: 3; }
  .ki-c6 { order: 4; }
  .ki-map { order: 5; align-self: unset; height: 331px; }
}

/* =====================================================================
   Zusaetze 30.07.2026 (Call mit der Kanzlei)
   1. Rechtsgebiete-Kacheln oeffnen den Originaltext der Kanzlei
   2. Sektion mit den Alleinstellungsmerkmalen
   3. Anwaltskarten: numerierte Punkte, auch am Handy sichtbar
   ===================================================================== */

/* --- 1. Rechtsgebiete ------------------------------------------------ */
.ind-hint {
  margin: 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(27, 28, 28, 0.6);
}
button.ind-card {
  border: 0;
  margin: 0;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
button.ind-card:hover,
button.ind-card[aria-expanded="true"] { background: var(--lime); }
button.ind-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ind-chev {
  flex: none;
  display: flex;
  align-items: center;
  opacity: 0.5;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
button.ind-card:hover .ind-chev { opacity: 1; }
button.ind-card[aria-expanded="true"] .ind-chev { transform: rotate(180deg); opacity: 1; }

.ind-panels { display: block; }
.ind-panel {
  margin-top: 10px;
  padding: 40px 44px;
  background: var(--khaki);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ind-panel h3 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.ind-panel p {
  margin: 0;
  max-width: 76ch;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(27, 28, 28, 0.86);
}
.ind-panel .ind-panel-lead {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
}
.ind-panel-links { display: flex; flex-flow: row wrap; gap: 10px; margin-top: 8px; }
.ind-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  background: var(--ink);
  color: var(--lime);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.ind-panel-link svg path { fill: var(--lime); }
.ind-panel-link:hover { background: #000; transform: translateY(-2px); }

/* --- 2. Alleinstellungsmerkmale -------------------------------------- */
.sec-usp { background: var(--khaki); padding: 120px 32px; }
.usp-cont { max-width: 1340px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px; }
.usp-head { display: flex; flex-direction: column; gap: 32px; align-items: center; }
.usp-head .tag-wrap { height: 88px; }
.usp-h2 { text-align: center; max-width: 22ch; }
/* war transparent + 45%-Grau (wirkte ausgegraut) — jetzt die Marken-Hervorhebung
   wie in .stats-h2: schwarze Platte, Lime-Text */
/* nowrap: sonst reisst der Zeilenumbruch die schwarze Platte in zwei Stuecke */
.usp-h2 mark { background: var(--black); color: var(--lime); white-space: nowrap; }
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.usp-card {
  background: var(--white-warm);
  padding: 34px 30px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.usp-num {
  font-family: 'Red Hat Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(27, 28, 28, 0.45);
}
.usp-card h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.usp-card p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  color: rgba(27, 28, 28, 0.78);
}
.usp-cta {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 32px;
  background: var(--ink);
  text-decoration: none;
}
.usp-cta-text { font-size: 18px; line-height: 1.5; color: var(--white-warm); }
.usp-cta-text strong { color: var(--lime); font-weight: 600; }
.usp-cta-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--lime);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: transform 0.2s ease;
}
.usp-cta:hover .usp-cta-btn { transform: translateY(-2px); }

/* Startseite im LP-Aufbau: diese Sektion ist der dunkle Anker zwischen
   Rechtsgebieten und Bewertungen — ohne ihn laufen vier helle Sektionen
   ineinander. Markup bleibt unveraendert, nur die Farben kippen. */
.sec-usp { background: var(--black); }
.sec-usp .tag-light .tag-square { background: var(--lime); }
.sec-usp .tag-light .tag-row p { color: var(--white-warm); }
.sec-usp .tag-light .tag-line { background: var(--white-15); }
.usp-h2 { color: var(--white-warm); }
.usp-h2 mark { background: var(--lime); color: var(--ink); }
.usp-card { background: var(--white-5); }
.usp-num { color: var(--lime); }
.usp-card h3 { color: var(--white-warm); }
.usp-card p { color: rgba(255, 255, 230, 0.72); }
.usp-cta { background: var(--white-5); border: 1px solid var(--white-15); }

/* --- 3. Anwaltskarten ----------------------------------------------- */
.tc-subnum {
  flex: none;
  min-width: 22px;
  font-family: 'Red Hat Mono', monospace;
  font-size: 12px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(27, 28, 28, 0.4);
}
/* Die Punkte der Kanzlei sind ganze Saetze, keine Schlagworte: die alte
   Versal-Monoschrift mit 0.15em Sperrung war dafuer unlesbar. */
.tc-subrow { display: flex; flex-flow: row; align-items: baseline; gap: 10px; padding-left: 0; }
.tc-subrow p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(27, 28, 28, 0.9);
}

@media (max-width: 1199.98px) {
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-panel { padding: 34px 32px; }
  .ind-panel h3 { font-size: 26px; }
}

@media (max-width: 809.98px) {
  .sec-usp { padding: 80px 20px; }
  .usp-cont { gap: 40px; }
  .usp-grid { grid-template-columns: 1fr; }
  .usp-card { padding: 26px 22px 28px; }
  .usp-card h3 { font-size: 21px; }
  .usp-h2 { max-width: none; }
  .usp-cta { padding: 22px; flex-direction: column; align-items: stretch; }
  .usp-cta-text { font-size: 17px; }
  .usp-cta-btn { justify-content: center; }
  .ind-hint { font-size: 16px; }
  .ind-panel { padding: 24px 20px; margin-top: 8px; }
  .ind-panel h3 { font-size: 22px; }
  .ind-panel p { font-size: 16px; }
  .ind-panel .ind-panel-lead { font-size: 17px; }
  .ind-panel-links { flex-direction: column; }
  .ind-panel-link { justify-content: space-between; }
  /* Die fuenf Punkte sind der Kern der Karte ("daneben die fuenf Punkte,
     Schluss aus Ende") und muessen am Handy sichtbar sein. */
  .tc-subs { display: flex; }
  .tc-subrow p { font-size: 15px; line-height: 21px; }
}

/* --- 4. Sekretariat auf der Teamseite (nur Namen, Wunsch der Kanzlei) ---- */
.rs-sekretariat { background: var(--black); padding: 0 32px 120px; }
.sek-cont { max-width: 1340px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.sek-cont .tag-wrap { height: 72px; }
.sek-h2 { margin: 0; color: var(--white-warm); max-width: 24ch; }
.sek-grid { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sek-name {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  background: var(--white-5);
  border: 1px solid var(--white-10);
}
.sek-dot { flex: none; width: 8px; height: 8px; background: var(--lime); }
.sek-name p {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--white-warm);
}

@media (max-width: 1199.98px) {
  .sek-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 809.98px) {
  .rs-sekretariat { padding: 0 20px 80px; }
  .sek-grid { grid-template-columns: 1fr; }
  .sek-name { padding: 16px 18px; }
  .sek-name p { font-size: 17px; }
}

/* Blog: der Kasten unter den Artikeln fuehrt jetzt zum Kontakt statt zu einem
   Newsletter-Feld, das nichts getan hat. */
a.bp-submit.bp-newslink { text-decoration: none; height: 46px; padding: 0 22px; width: auto; align-self: flex-start; transition: transform .2s ease; }
a.bp-submit.bp-newslink:hover { transform: translateY(-2px); }
a.bp-submit.bp-newslink p { margin: 0; white-space: nowrap; }


/* =====================================================================
   KORREKTURRUNDE 20.08.2026 (Mail Iris Weiß + Call 19.08.)
   ===================================================================== */

/* 1) Recirc-Karten (.ef-card-static) am Handy: Spalten-Layout wie die
      Erfolge-Liste — das erzwungene Desktop-Layout kollabierte bei 390px
      zu buchstabenschmalen Spalten (Screenshot der Kanzlei). */
@media (max-width: 809.98px) {
  .ef-card-static { height: auto; flex-direction: column; }
  .ef-card-static .ef-left { order: 1; flex: none; width: 100%; height: auto; justify-content: center; }
  .ef-card-static .ef-imgwrap { order: 0; flex: none; width: 100%; height: 284px; }
  .ef-card-static .ef-img { top: -8.58818%; left: 0; transform: none; aspect-ratio: auto; width: 100%; height: auto; }
  .ef-card-static .ef-right { display: none; }
  .ef-card-static .ef-more-p { display: block; }
  .ed-ocont .ef-list { gap: 60px 0; }
}

/* 2) Keine harten Wortumbrüche mitten im Wort (Bundes-Sozialgericht,
      Recht-Sprechung): saubere deutsche Silbentrennung statt break-word. */
.ed-h1, .ef-title, .rh-h1, .ed-oh2 { word-break: normal; overflow-wrap: normal; hyphens: auto; }

/* 3) Handy-Hero: Textblock nach unten verankern, damit die Schriftzüge
      Olivers Gesicht nicht mehr verdecken (Mail 20.08.). */
@media (max-width: 809.98px) {
  .hero { padding: 140px 20px 96px; }
  .hero-container { height: 100%; justify-content: flex-end; }
}

/* 4) Blocksatz für Fließtext (Kanzlei-Wunsch: INSGESAMT BLOCKSATZ). */
.tc-desc, .faq-box p, .bp-overview, .bp-prose p, .bp-prose li,
.bp-aboutp, .bp-newstext p, .ed-overview, .lg-inner p, .lg-inner li,
.nk-lead, .nk-body, .na-hero-sub, .ki-cell > p {
  text-align: justify;
  hyphens: auto;
}