/* ==========================================================================
   Kreuzberger em., Stranimaier, Vogler & Grünauer Rechtsanwälte OG
   Stylesheet – ein einziges File, keine Build-Schritte.

   Aufbau:
   1. Schriften          6. Header & Navigation
   2. Tokens (Farben …)  7. Seitenbausteine (Hero, Listen, Team …)
   3. Basis              8. Footer
   4. Layout             9. Bewegung
   5. Typografie        10. Rechtstexte, Hilfsklassen

   Farben nur über die Tokens in :root ändern – nie Farbwerte direkt in
   Bausteine schreiben.
   ========================================================================== */

/* 1. Schriften (selbst gehostet, OFL-Lizenz, keine Anfragen an Dritte) ---- */
@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/titillium-web-latin-300-normal.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/titillium-web-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Titillium Web";
  src: url("../fonts/titillium-web-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900; font-style: italic; font-display: swap;
}

/* 2. Tokens --------------------------------------------------------------- */
:root {
  /* Farben – abgeleitet aus dem Briefkopf der Kanzlei */
  --red: #a70b16;          /* Briefkopf-Rot, nur als Akzent */
  --red-deep: #860912;     /* Hover/aktiv */
  --band: #ececee;         /* graues Band des Briefkopfs */
  --line: #d6d6d8;         /* Haarlinien */
  --sep: #c6c6c8;          /* graue Trenner zwischen den Namen */
  --ink: #1c1d1f;          /* Text */
  --ink-2: #54565a;        /* Zweittext */
  --ink-3: #6a6c70;        /* Beschriftungen (auf Weiß und Off-White ≥ 4.5:1) */
  --paper: #ffffff;
  --paper-2: #f7f7f5;      /* ruhige Zweitfläche */

  /* Schriften */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Titillium Web", "Segoe UI", system-ui, sans-serif;

  /* Schriftgrößen (fluid) */
  --fs-xs: 0.8125rem;                               /* 13 */
  --fs-sm: 0.9375rem;                               /* 15 */
  --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17–19 */
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 1.9vw, 3.125rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 3.9vw, 5.25rem);

  /* Raum */
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --container: 82.5rem;                            /* 1320 */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(3rem, 2rem + 4vw, 5.5rem);
  --section: clamp(4.5rem, 3rem + 7vw, 10rem);

  /* Bewegung */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-ui: 360ms;
  --dur-reveal: 800ms;
  --dur-band: 1200ms;
  --ease-unfold: cubic-bezier(0.62, 0, 0.12, 1);  /* ruhiger Anlauf, weiches Ankommen */
  --dur-unfold: 1300ms;

  --header-h: 5.25rem;
}

/* 3. Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 100;
  background: var(--ink); color: #fff; padding: 0.75rem 1rem;
  font-family: var(--sans); font-size: var(--fs-sm); text-decoration: none;
  transition: top var(--dur-fast) var(--ease-soft);
}
.skip-link:focus { top: 0.75rem; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 4. Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 0.5rem + 1.6vw, 2rem);
}
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section--tint { background: var(--paper-2); }
.section--tint + .section { padding-top: var(--section); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.rule--section { margin-bottom: var(--space-5); }

/* Inhalte, die an der Titelspalte des Abschnittskopfs ausgerichtet sind */
.indent { grid-column: 1 / -1; }
@media (min-width: 60em) { .indent { grid-column: 4 / 13; } }

/* Abschnittskopf: Beschriftung links, Titel rechts (ab Tablet) */
.section-head { row-gap: var(--space-2); margin-bottom: var(--space-5); }
.section-head > .label { grid-column: 1 / -1; }
.section-head > .section-head__body { grid-column: 1 / -1; }
@media (min-width: 60em) {
  .section-head > .label { grid-column: 1 / 4; padding-top: 0.9em; }
  .section-head > .section-head__body { grid-column: 4 / 12; }
}

/* 5. Typografie ----------------------------------------------------------- */
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.022em; line-height: 1.04; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.018em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34em;
  text-wrap: pretty;
}
.prose { max-width: 38em; }
.prose p, .lead { text-wrap: pretty; }

/* Beschriftung in der Briefkopf-Grotesk, mit kurzem rotem Strich */
.label {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.label::before {
  content: ""; flex: none;
  width: 1.5rem; height: 2px; background: var(--red);
}

.sans { font-family: var(--sans); }

/* Links im Fließtext */
.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--sep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.link:hover { text-decoration-color: var(--red); color: var(--red-deep); }

/* Pfeil-Link („Alle Rechtsgebiete →“) */
.more {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--ink);
  transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.more svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-ui) var(--ease); }
.more:hover { color: var(--red); border-color: var(--red); }
.more:hover svg { transform: translateX(4px); }

/* Schaltflächen: eckig, ruhig */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 3.25rem;
  padding: 0.8rem 1.4rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink); color: #fff;
  transition: background var(--dur-ui) var(--ease-soft), border-color var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { background: var(--red); border-color: var(--red); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--sep); }
.btn--ghost:hover { background: transparent; color: var(--red); border-color: var(--red); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* 6. Header & Navigation -------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; /* bewusst deckend und ohne backdrop-filter: der Weichzeichner kostete beim Scrollen pro Bild ein Vielfaches der übrigen Zeichenarbeit */
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-ui) var(--ease-soft);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: var(--header-h);
}

/* Wortmarke im Header */
.brand {
  display: flex; align-items: center; gap: 0.85rem;
  text-decoration: none; color: var(--ink);
  min-width: 0;
}
.brand__signet { width: 2.6rem; height: auto; flex: none; }
.brand__text { display: grid; gap: 0.2rem; min-width: 0; }
.brand__names {
  font-family: var(--sans); font-weight: 400;
  font-size: 0.9375rem; line-height: 1.1;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}
.brand__names > span + span::before, .brand__names > br + span::before {
  content: ""; display: inline-block;
  width: 3px; height: 0.8em; margin: 0 0.5em 0 0.45em;
  background: var(--sep); vertical-align: -0.05em;
}
.brand__names .em { text-transform: none; letter-spacing: 0.02em; }
.brand__br { display: none; }
.brand__sub {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-3);
}
/* Startseite: Wortmarke im Header erst sichtbar, wenn der Hero-Briefkopf verlassen ist */
.js .is-home .site-header .brand__text { transition: opacity var(--dur-ui) var(--ease-soft), transform var(--dur-ui) var(--ease); }
.js .is-home .site-header:not(.show-brand) .brand__text { opacity: 0; transform: translateY(4px); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 2rem); }
.nav__list { display: flex; gap: clamp(1rem, 1.8vw, 2rem); list-style: none; margin: 0; }
.nav__link {
  position: relative;
  font-family: var(--sans); font-size: 1rem; font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink); text-decoration: none;
  padding-block: 0.5rem;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem;
  height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-ui) var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--red); }

.nav__phone {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink); text-decoration: none;
  padding: 0.55rem 0 0.55rem 1.25rem;
  border-left: 1px solid var(--line);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-soft);
}
.nav__phone svg { width: 1rem; height: 1rem; color: var(--red); }
.nav__phone:hover { color: var(--red); }

.lang {
  display: flex; align-items: center;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em;
}
.lang a, .lang span[aria-current] {
  padding: 0.5rem 0.35rem; text-decoration: none; color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-soft);
}
.lang a:hover { color: var(--red); }
.lang span[aria-current] { color: var(--ink); }
.lang__sep { width: 1px; height: 0.9em; background: var(--sep); }

.header-tools { display: none; align-items: center; gap: 0.25rem; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--ink); background: none; border: 0; cursor: pointer; text-decoration: none;
}
.icon-btn svg { width: 1.25rem; height: 1.25rem; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  height: 2.75rem; padding: 0 0.25rem 0 0.75rem;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); background: none; border: 0; cursor: pointer;
}
.menu-btn__bars { position: relative; width: 1.35rem; height: 0.7rem; }
.menu-btn__bars::before, .menu-btn__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform var(--dur-ui) var(--ease), top var(--dur-ui) var(--ease);
}
.menu-btn__bars::before { top: 0; }
.menu-btn__bars::after { top: calc(100% - 1.5px); }
.menu-open .menu-btn__bars::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
.menu-open .menu-btn__bars::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }

/* Mobile-Menü */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: var(--space-4) var(--gutter) var(--space-4);
  overflow-y: auto;
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-soft), visibility 0s linear var(--dur-ui);
}
.menu-open .mobile-menu { visibility: visible; opacity: 1; transition: opacity var(--dur-ui) var(--ease-soft); }
.mobile-menu__list { list-style: none; border-top: 1px solid var(--line); }
.mobile-menu__list li { border-bottom: 1px solid var(--line); }
.mobile-menu__list a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.1rem 0;
  font-family: var(--serif); font-size: 1.75rem; line-height: 1.2;
  text-decoration: none; color: var(--ink);
}
.mobile-menu__list a[aria-current="page"] { color: var(--red); }
.mobile-menu__list .num { font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--ink-3); }
.mobile-menu__contact { margin-top: auto; padding-top: var(--space-4); display: grid; gap: 0.75rem; }
.mobile-menu__contact .btn { width: 100%; }
.mobile-menu .lang { margin-top: var(--space-3); }
body.menu-open { overflow: hidden; }

@media (max-width: 63.99em) {
  .nav { display: none; }
  .header-tools { display: flex; }
}
@media (min-width: 64em) {
  .mobile-menu { display: none; }
}
/* Unter 80em: Wortmarke zweizeilig, damit die Navigation (inkl. Startseite) Platz hat */
@media (max-width: 79.99em) {
  .brand__names { font-size: 0.8125rem; line-height: 1.3; }
  .brand__br { display: inline; }
  .brand__names > span:nth-of-type(3)::before { display: none; }
}
@media (max-width: 30em) {
  :root { --header-h: 4.5rem; }
  .site-header__inner { gap: 0.75rem; }
  .brand { gap: 0.6rem; }
  .brand__signet { width: 2.1rem; }
  .brand__names { font-size: 0.75rem; letter-spacing: 0.03em; }
  .brand__sub { font-size: 0.625rem; letter-spacing: 0.26em; }
  /* Menü-Knopf nur als Symbol; die Beschriftung bleibt für Screenreader erhalten */
  .menu-btn { padding: 0 0.25rem; }
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .header-tools { gap: 0; }
}
@media (max-width: 22.5em) {
  .brand__names { font-size: 0.65rem; letter-spacing: 0.01em; }
  .brand__signet { width: 1.8rem; }
  .icon-btn { width: 2.5rem; }
}

/* 7. Seitenbausteine ------------------------------------------------------ */

/* 7.1 Hero mit Briefkopf */
.hero { padding-top: clamp(1.25rem, 0.5rem + 3vw, 3.5rem); padding-bottom: var(--section); }

/* Briefkopf „Entfalten“ – Geometrie:
   --edge = Abstand vom Fensterrand zur Inhaltskante (wie .container).
   Das graue Band läuft vom linken Fensterrand bis zur rechten Inhaltskante,
   das rote Band vom rechten Fensterrand bis zur linken Inhaltskante. Jede Bildkante
   trägt ein Band, beide Innenkanten liegen auf dem Raster. Die Namen beginnen auf der
   linken Inhaltskante (Linie von Signet und H1), „RECHTSANWÄLTE“ endet auf der rechten.
   Prozentwerte beziehen sich auf die volle Breite von .letterhead. */
.letterhead {
  --edge: max(var(--gutter), (100% - var(--container)) / 2);
  --inset: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);
  position: relative;
  margin-bottom: clamp(3rem, 2rem + 5vw, 6.5rem);
}
.letterhead__band {
  position: relative;
  isolation: isolate;
  margin-right: var(--edge);
  padding: clamp(0.9rem, 0.5rem + 1.4vw, 1.6rem) var(--inset) clamp(0.9rem, 0.5rem + 1.4vw, 1.6rem) var(--edge);
}
/* Fläche als eigene Ebene, damit sie sich per transform entfalten kann */
.letterhead__band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--band);
  border-top: 3px solid var(--line);
  border-bottom: 3px solid var(--line);
  transform-origin: left center;
}
.letterhead__names {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  column-gap: clamp(0.75rem, 0.2rem + 1.5vw, 1.6rem);
  row-gap: 0.35rem;
  margin: 0;
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1.25rem, 0.35rem + 2.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--red);
}
.letterhead__names .em { text-transform: none; }
.letterhead__sep {
  width: clamp(4px, 0.2rem + 0.3vw, 9px); height: 0.72em;
  background: var(--sep);
  flex: none;
}
.letterhead__break { display: none; }
.letterhead__red {
  position: relative;
  margin-top: clamp(0.5rem, 0.3rem + 0.6vw, 0.9rem);
  margin-left: var(--edge);
  height: clamp(2rem, 1.5rem + 1.6vw, 3.1rem);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: var(--edge);
  overflow: hidden;
}
.letterhead__red::before {
  content: ""; position: absolute; inset: 0; background: var(--red);
  transform-origin: right center;
}
.letterhead__red span {
  position: relative;
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(0.75rem, 0.55rem + 0.75vw, 1.35rem);
  letter-spacing: 0.34em; text-transform: uppercase;
  color: #fff; margin-right: -0.34em;
}
/* Mobil: zwei Zeilen wie in der Header-Wortmarke – das Band ist gefüllt statt halb leer */
@media (max-width: 40em) {
  .letterhead__names { font-size: min(5.3vw, 1.625rem); column-gap: 0.6em; row-gap: 0.3rem; letter-spacing: 0.01em; }
  .letterhead__sep--break { display: none; }
  .letterhead__break { display: block; flex-basis: 100%; height: 0; }
}

.hero__grid { row-gap: var(--space-4); align-items: start; }
.hero__title { grid-column: 1 / -1; }
.hero__title h1 { max-width: 11em; }
.hero__aside { grid-column: 1 / -1; }
.hero__aside .lead { margin-bottom: var(--space-4); color: var(--ink); }

/* Direkteinstieg in die Rechtsgebiete */
.hero__areas { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); font-family: var(--sans); }

@media (min-width: 60em) {
  .hero__title { grid-column: 1 / 8; }
  .hero__aside { grid-column: 8 / 13; padding-top: 0.9rem; }
}

.contact-strip {
  display: grid; gap: 0;
  margin-top: clamp(3.5rem, 2rem + 5vw, 6rem);
  border-top: 1px solid var(--line);
  font-family: var(--sans);
}
.contact-strip > div { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.contact-strip dt {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 0.2rem;
}
.contact-strip dd { margin: 0; font-size: 1.125rem; }
.contact-strip a { text-decoration: none; color: var(--ink); transition: color var(--dur-fast) var(--ease-soft); }
.contact-strip a:hover { color: var(--red); }
/* Zwei Spalten ab Tablet, vier erst, wenn die E-Mail-Adresse ungebrochen in eine Spalte passt */
@media (min-width: 40em) {
  .contact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1rem, 0.5rem + 1.6vw, 2rem); }
}
@media (min-width: 80em) {
  .contact-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.contact-strip dd { font-variant-numeric: tabular-nums; }

/* 7.2 Positionierung: großes Typo-Statement */
.statement { padding-block: var(--section); }
.statement .label { grid-column: 1 / -1; margin-bottom: var(--space-3); align-self: start; }
.statement__text {
  grid-column: 1 / -1; margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 2.9vw, 3.5rem);
  line-height: 1.16; letter-spacing: -0.02em;
  max-width: 21em;
  text-wrap: balance;
}
.statement__text span { color: var(--ink-3); }
.statement__cta { grid-column: 1 / -1; margin-top: var(--space-4); }
@media (min-width: 60em) {
  .statement .label { grid-column: 1 / 4; padding-top: 1.1em; margin-bottom: 0; }
  .statement__text { grid-column: 4 / 13; }
  .statement__cta { grid-column: 4 / 13; }
}

/* 7.2b Wofür wir stehen: feines Raster, nummeriert */
.qualities {
  list-style: none;
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(1rem, 0.5rem + 1.6vw, 2rem);
}
@media (min-width: 40em) { .qualities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .qualities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quality {
  position: relative;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
/* Haarlinie über die ganze Breite */
.quality::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--line);
  transform-origin: left center;
}
/* rote Linie: ein kurzes Stück der Haarlinie (12 %), wächst beim Überfahren über die ganze Breite */
.quality::before {
  content: ""; position: absolute; left: 0; right: 0; top: -0.5px; height: 2px; z-index: 1;
  background: var(--red);
  transform: scaleX(0.12); transform-origin: left center;
  transition: transform 1100ms var(--ease-unfold);
}
.quality__n {
  display: block;
  font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
  transition: color 500ms var(--ease-soft);
}
.quality h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.875rem); margin: 0.7rem 0 0.6rem; }
.quality p { margin: 0; color: var(--ink-2); max-width: 26em; }
.quality h3, .quality p { transition: opacity 600ms var(--ease-soft); }
/* Begriffsraster: nur Substantive, größer gesetzt, ruhiger Rhythmus */
.quality--term { padding-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }
.quality--term h3 {
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.12; letter-spacing: -0.015em;
  margin: 0.9rem 0 0; hyphens: manual; overflow-wrap: break-word;
}

/* Hover nur mit Maus (nicht auf Touch-Geräten):
   die rote Linie zieht sich über die Breite, die Nummer nimmt die Akzentfarbe an,
   die übrigen fünf Aussagen treten leicht zurück. */
@media (hover: hover) and (pointer: fine) {
  .quality:hover::before { transform: scaleX(1); }
  .quality:hover .quality__n { color: var(--red); }
  .qualities:has(.quality:hover) .quality:not(:hover) h3,
  .qualities:has(.quality:hover) .quality:not(:hover) p { opacity: 0.62; }
}

.quote-row { row-gap: var(--space-4); margin-top: var(--space-5); }
.quote-row .quote { margin: 0; }

.quote {
  margin: var(--space-5) 0 0;
  padding: 0;
}
.quote blockquote {
  margin: 0;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  line-height: 1.3; letter-spacing: -0.01em;
  max-width: 24em;
  text-wrap: balance;
}
.quote blockquote p { margin: 0; }
.quote figcaption {
  margin-top: var(--space-3);
  font-family: var(--sans); font-size: var(--fs-sm); letter-spacing: 0.06em; color: var(--ink-2);
}

.section-foot { margin-top: var(--space-4); }
.section-foot--split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.section-foot--split .note { margin: 0; }
.section-head__lead { margin: var(--space-3) 0 0; }

/* 7.4 Rechtsgebiete – Seite */
.area-group { padding-block: var(--space-5); }
.area-group > .container { position: relative; }
.area-group > .container::before {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(-1 * var(--space-5));
  height: 1px; background: var(--line);
}
.page-head + .area-group > .container::before { display: none; }
.area-group__head { grid-column: 1 / -1; margin-bottom: var(--space-3); }
.area-group__head h2 { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.5rem); }
.area-group__head .range {
  display: block; margin-bottom: 0.6rem;
  font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em;
  color: var(--ink-3);
}
.area-list { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
@media (min-width: 75em) {
  .area-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-list > .area:nth-child(2) { padding-top: 0.25rem; }
}

/* Übersicht der fünf Bereiche direkt unter dem Seitenkopf */
.area-index { padding-bottom: var(--space-4); }
.area-index ol {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.area-index li { border-bottom: 1px solid var(--line); }
.area-index a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.85rem 0; text-decoration: none; color: var(--ink);
  transition: color var(--dur-fast) var(--ease-soft);
}
.area-index__n { flex: none; min-width: 3.5rem; font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.area-index__t { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.3; }
.area-index a:hover, .area-index a:focus-visible { color: var(--red-deep); }
.area-index a:hover .area-index__n { color: var(--red); }
@media (min-width: 48em) { .area-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1rem, 0.5rem + 1.6vw, 2rem); } }
@media (min-width: 75em) {
  .area-index ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .area-index a { flex-direction: column; gap: 0.35rem; padding: 1rem 1rem 1.1rem 0; }
}
@media (min-width: 60em) {
  .area-group__head { grid-column: 1 / 5; margin-bottom: 0; }
  .area-group__head > div { position: sticky; top: calc(var(--header-h) + 2rem); }
  .area-list { grid-column: 5 / 13; }
}
.area {
  position: relative;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.25rem 1rem;
  align-content: start; /* im Zweispalten-Raster keine Zusatzhöhe auf die Überschrift verteilen */
  padding: 1.5rem 0 1.6rem;
  border-bottom: 1px solid var(--line);
}
.area:first-child { padding-top: 0.25rem; }
.area::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-reveal) var(--ease);
}
.area:hover::after { transform: scaleX(1); }
.area__n {
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--ink-3); padding-top: 0.45rem;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-ui) var(--ease-soft);
}
.area:hover .area__n { color: var(--red); }
.area h3 { grid-column: 2; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.625rem); margin-bottom: 0.4rem; overflow-wrap: break-word; }
.area p { grid-column: 2; margin: 0; color: var(--ink-2); max-width: 36em; overflow-wrap: break-word; hyphens: auto; } /* lange Wörter wie „Verlassenschaftsabhandlungen“ */
@media (max-width: 40em) { .area { grid-template-columns: 2.25rem minmax(0, 1fr); } }
.area__alt { font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-3); }

.note {
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-2);
  border-left: 2px solid var(--red); padding-left: 1rem; max-width: 42em;
}
.note--lg { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink); padding-left: 1.25rem; }

/* 7.5 Team */
.team-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(1rem, 0.5rem + 1.6vw, 2rem);
}
@media (min-width: 48em) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 75em) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.person figure { margin: 0; }
.person__img {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--band);
}
.person__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: filter var(--dur-reveal) var(--ease-soft), transform 1.6s var(--ease);
}
@media (hover: hover) {
  .person__img img { filter: grayscale(1) contrast(1.02); }
  .person:hover .person__img img { filter: grayscale(0); transform: scale(1.015); }
}
.person__img::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-reveal) var(--ease);
}
.person:hover .person__img::after { transform: scaleX(1); }
.person figcaption { padding-top: 1rem; }
.person__title {
  display: block;
  font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  min-height: 1.4em;
}
.person__name { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem); line-height: 1.25; margin: 0.15rem 0 0; }
.person__name .em { font-family: var(--sans); font-size: 0.8em; color: var(--ink-3); }
.person__role + .person__role { margin-top: 0.1rem; }
.person__role {
  display: block; margin-top: 0.3rem; overflow-wrap: break-word; line-height: 1.4;
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-2);
}

/* Teamseite: Gruppen mit nummeriertem Kopf und feiner Linie */
.team-group { padding-bottom: var(--space-5); }
.team-group + .team-group { padding-top: var(--space-3); }
.team-group__head {
  position: relative;
  display: flex; align-items: baseline; gap: 1.25rem;
  padding-bottom: 1rem; margin-bottom: var(--space-4);
}
.team-group__head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line); transform-origin: left center;
}
.team-group__head::before {
  content: ""; position: absolute; left: 0; bottom: -0.5px; width: 2.5rem; height: 2px; z-index: 1;
  background: var(--red); transform-origin: left center;
}
.team-group__n {
  font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.team-group__head h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.section-head__cta { margin-top: var(--space-4); }

/* 7.6 Standort & Karte */
.location { row-gap: var(--space-4); }
.location__text { grid-column: 1 / -1; }
.location__map { grid-column: 1 / -1; }
@media (min-width: 60em) {
  .location__text { grid-column: 1 / 6; }
  .location__map { grid-column: 6 / 13; }
}
.address-block {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.35;
  margin-bottom: var(--space-4);
}
.location__intro { color: var(--ink-2); max-width: 26em; margin-bottom: var(--space-3); }
.link-stack { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }

/* Bürozeiten */
.hours { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 1.0625rem; }
.hours caption {
  text-align: left; padding-bottom: 0.75rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.hours th, .hours td { padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-weight: 400; vertical-align: baseline; }
.hours tr:first-child th, .hours tr:first-child td { border-top: 1px solid var(--line); }
.hours th { text-align: left; padding-right: 1rem; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours tr.is-today th { font-weight: 600; }
.hours tr.is-today th::before {
  content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.6rem;
  background: var(--red); vertical-align: 0.12em;
}
.hours__today { color: var(--red); font-weight: 400; }
.contact-hours { margin-top: var(--space-4); }
.contact-list { display: grid; border-top: 1px solid var(--line); font-family: var(--sans); margin: 0; }
.cta__links + .contact-list { border-top: 0; }
.contact-list > div {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: 1rem;
  padding: 0.95rem 0; border-bottom: 1px solid var(--line);
}
.contact-list dt {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.contact-list dd { margin: 0; font-size: 1.125rem; }
.contact-list a { color: var(--ink); text-decoration: none; transition: color var(--dur-fast) var(--ease-soft); }

/* Linien zeichnen sich unter Kontaktdaten und Direktlinks (Microinteraction) */
.contact-strip a, .contact-list a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-ui) var(--ease), color var(--dur-fast) var(--ease-soft);
}
.contact-strip a:hover, .contact-list a:hover,
.contact-strip a:focus-visible, .contact-list a:focus-visible { background-size: 100% 1px; color: var(--red); }
.contact-list a:hover { color: var(--red); }

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--band);
  overflow: hidden;
}
@media (min-width: 60em) { .map--wide { aspect-ratio: 16 / 9; } }
@media (max-width: 40em) { .map { aspect-ratio: 1 / 1; } }
.map__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  /* ruhiges Raster statt Fake-Karte */
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}
.map__pin {
  position: absolute; left: 50%; top: 30%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: var(--red);
  box-shadow: 0 0 0 8px rgba(167, 11, 22, 0.12);
}
.map__pin::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 42px; background: var(--red);
}
.map__note {
  font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2);
  max-width: 30em; margin: 0;
  background: var(--band); padding: 0.25rem 0;
}
.map__note a { color: inherit; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.is-loaded .map__placeholder { display: none; }
.map-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1rem; }

.building { margin: 0; }
.building img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: filter var(--dur-reveal) var(--ease-soft); }
@media (hover: hover) {
  .building img { filter: grayscale(1) contrast(1.02); }
  .building:hover img { filter: grayscale(0); }
}
.building figcaption {
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-3); padding-top: 0.75rem;
}

/* 7.7 Abschluss-CTA */
.cta { background: var(--band); padding-block: var(--section); position: relative; }
.cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(0.5rem, 0.3rem + 0.6vw, 0.9rem);
  background: var(--red);
}
.cta__grid { row-gap: var(--space-4); align-items: start; }
.cta__title { grid-column: 1 / -1; }
.cta__title h2 { margin-top: var(--space-3); }
.cta__lead { margin: var(--space-3) 0 0; color: var(--ink-2); max-width: 26em; }
.cta__links { grid-column: 1 / -1; display: grid; gap: 0; border-top: 1px solid var(--sep); }
.cta__hours { grid-column: 1 / -1; }
.cta .hours th, .cta .hours td { border-color: var(--sep); }
@media (min-width: 60em) {
  .cta__title { grid-column: 1 / 6; }
  .cta__links { grid-column: 7 / 13; grid-row: 1 / span 2; }
  .cta__hours { grid-column: 1 / 6; }
}
.cta__link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--sep);
  text-decoration: none; color: var(--ink);
  font-family: var(--sans); font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem); font-weight: 400;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.cta__link > span { min-width: 0; }
.cta__link small {
  display: block;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.cta__link svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--ink-3); transition: transform var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease-soft); }
.cta__link:hover { color: var(--red); }
.cta__link:hover svg { transform: translateX(6px); color: var(--red); }

/* 7.8 Seitenkopf der Unterseiten */
.page-head { padding-top: clamp(3rem, 2rem + 5vw, 7rem); padding-bottom: var(--space-5); }
.page-head .label { margin-bottom: var(--space-3); }
.page-head h1 { max-width: 14em; }
.page-head .lead { margin-top: var(--space-3); }
.page-head__rule {
  --edge: max(var(--gutter), (100% - var(--container)) / 2);
  --h: clamp(0.4rem, 0.25rem + 0.4vw, 0.6rem);
  position: relative;
  height: calc(2 * var(--h) + 0.4rem);
  margin-top: var(--space-5);
}
/* grau: linker Fensterrand → rechte Inhaltskante; rot: rechter Fensterrand → 60 % der Inhaltsbreite */
.page-head__rule::before {
  content: ""; position: absolute; left: 0; right: var(--edge); top: 0; height: var(--h);
  background: var(--band); border-top: 2px solid var(--line);
  transform-origin: left center;
}
.page-head__rule::after {
  content: ""; position: absolute; right: 0; bottom: 0; height: var(--h);
  left: calc(var(--edge) + (100% - 2 * var(--edge)) * 0.6);
  background: var(--red);
  transform-origin: right center;
}

/* 8. Footer --------------------------------------------------------------- */
.site-footer { background: var(--paper); padding-top: var(--space-5); padding-bottom: var(--space-4); font-family: var(--sans); }
.site-footer__grid { row-gap: var(--space-4); }
.footer-brand { grid-column: 1 / -1; }
.footer-col { grid-column: span 12; }
@media (min-width: 40em) { .footer-col { grid-column: span 6; } }
@media (min-width: 64em) {
  .footer-brand { grid-column: 1 / 5; }
  .footer-col { grid-column: span 2; }
  /* Anschrift und Kontakt breiter, damit „Franz-Mohshammer-Platz 14“ nicht umbricht */
  .footer-col:nth-child(2), .footer-col--wide { grid-column: span 3; }
}
.footer-brand__signet { width: 2.75rem; margin-bottom: 1rem; }
.footer-brand p { font-size: 1rem; line-height: 1.5; color: var(--ink); max-width: 20em; margin: 0; }
.footer-col h2 {
  font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; display: grid; gap: 0.35rem; }
.footer-col, .footer-col address { font-size: 1rem; line-height: 1.6; color: var(--ink); }
.footer-col a { color: var(--ink); text-decoration: none; transition: color var(--dur-fast) var(--ease-soft); }
.footer-col a:hover { color: var(--red); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: var(--space-5); padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.site-footer__bottom ul { list-style: none; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-footer__bottom a { color: var(--ink-2); text-decoration: none; }
.site-footer__bottom a:hover { color: var(--red); }
.footer-band { height: 3px; background: var(--line); }
.footer-band + .footer-band { height: 6px; background: var(--red); margin-top: 4px; }

/* 9. Bewegung ------------------------------------------------------------- */
/* Einblenden beim Scrollen: nur mit JS (Klasse .js am <html>) – ohne JS ist alles sichtbar */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-reveal) var(--ease-soft), transform var(--dur-reveal) var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Briefkopf entfaltet sich: graue Fläche vom linken Rand, dann die Namen, dann das rote Band vom rechten Rand */
.js .letterhead__band::before { transform: scaleX(0); animation: band-in var(--dur-unfold) var(--ease-unfold) 80ms forwards; }
.js .letterhead [data-lh] {
  opacity: 0; transform: translateY(0.35em);
  animation: lh-in 900ms var(--ease) forwards;
  animation-delay: calc(480ms + var(--i, 0) * 110ms);
}
.js .letterhead .letterhead__sep {
  opacity: 0; transform: scaleY(0.2);
  animation: sep-in 700ms var(--ease) forwards;
  animation-delay: calc(620ms + var(--i, 0) * 110ms);
}
.js .letterhead__red::before { transform: scaleX(0); animation: band-in var(--dur-unfold) var(--ease-unfold) 1000ms forwards; }
.js .letterhead__red span { opacity: 0; transform: translateX(0.75rem); animation: lh-in 900ms var(--ease) 1800ms forwards; }
/* Seitenkopf der Unterseiten: dieselbe Bewegung, kürzer */
.js .page-head__rule::before { transform: scaleX(0); animation: band-in 1000ms var(--ease-unfold) 150ms forwards; }
.js .page-head__rule::after { transform: scaleX(0); animation: band-in 1000ms var(--ease-unfold) 550ms forwards; }
/* „Wofür wir stehen“ und Team-Gruppen: der Container selbst blendet nicht,
   stattdessen zieht sich zuerst die Linie auf, dann folgen Nummer, Überschrift und Text.
   Keyframes mit fill-mode backwards: nach dem Aufbau gelten wieder die normalen Übergänge (Hover). */
.js .quality[data-reveal], .js .team-group__head[data-reveal] { opacity: 1; transform: none; transition: none; }
.js .quality[data-reveal]:not(.is-in)::after, .js .team-group__head[data-reveal]:not(.is-in)::after { transform: scaleX(0); }
.js .quality[data-reveal]:not(.is-in)::before, .js .team-group__head[data-reveal]:not(.is-in)::before { transform: scaleX(0); }
.js .quality[data-reveal]:not(.is-in) > *, .js .team-group__head[data-reveal]:not(.is-in) > * { opacity: 0; }
.js .quality.is-in::after, .js .team-group__head.is-in::after { animation: rule-in 900ms var(--ease-unfold) var(--delay, 0ms) backwards; }
.js .quality.is-in::before { animation: rule-in 700ms var(--ease) calc(var(--delay, 0ms) + 380ms) backwards; }
.js .team-group__head.is-in::before { animation: rule-in 700ms var(--ease) 380ms backwards; }
.js .quality.is-in > *, .js .team-group__head.is-in > * { animation: set-in 700ms var(--ease) backwards; }
.js .quality.is-in > .quality__n { animation-delay: calc(var(--delay, 0ms) + 260ms); }
.js .quality.is-in > h3 { animation-delay: calc(var(--delay, 0ms) + 340ms); }
.js .quality.is-in > p { animation-delay: calc(var(--delay, 0ms) + 420ms); }
.js .team-group__head.is-in > .team-group__n { animation-delay: 260ms; }
.js .team-group__head.is-in > h2 { animation-delay: 340ms; }
@keyframes rule-in { from { transform: scaleX(0); } }
@keyframes set-in { from { opacity: 0; transform: translateY(0.3rem); } }

/* Beschriftungen: der rote Strich zeichnet sich beim Einblenden */
.js .label[data-reveal]::before { transform: scaleX(0); transform-origin: left; transition: transform var(--dur-reveal) var(--ease) 200ms; }
.js .label[data-reveal].is-in::before { transform: none; }

@keyframes lh-in { to { opacity: 1; transform: none; } }
@keyframes sep-in { to { opacity: 1; transform: none; } }
@keyframes band-in { to { transform: scaleX(1); } }
@keyframes fade-in { to { opacity: 1; } }

/* Reduzierte Bewegung: keine Wege, nur weiche Blenden */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; transition: opacity 500ms var(--ease-soft); }
  .js .letterhead [data-lh], .js .letterhead .letterhead__sep, .js .letterhead__red span { transform: none; animation: fade-in 600ms var(--ease-soft) forwards; animation-delay: 150ms; }
  .js .letterhead__band::before, .js .letterhead__red::before,
  .js .page-head__rule::before, .js .page-head__rule::after { transform: none; opacity: 0; animation: fade-in 600ms var(--ease-soft) forwards; animation-delay: 0ms; }
  .js .letterhead__red span { animation-delay: 300ms; }
  .js .label[data-reveal]::before { transform: none; transition: none; }
  /* Linien stehen sofort, Texte blenden nur weich ein; kein Wachsen beim Überfahren */
  .js .quality[data-reveal]:not(.is-in)::after, .js .team-group__head[data-reveal]:not(.is-in)::after { transform: none; }
  .js .quality[data-reveal]:not(.is-in)::before { transform: scaleX(0.12); }
  .js .team-group__head[data-reveal]:not(.is-in)::before { transform: none; }
  .js .quality.is-in::after, .js .quality.is-in::before,
  .js .team-group__head.is-in::after, .js .team-group__head.is-in::before { animation: none; }
  .js .quality.is-in > *, .js .team-group__head.is-in > * { animation: fade-in 400ms var(--ease-soft) backwards; animation-delay: 0ms; }
  .quality::before { transition: none; }
  .quality:hover::before { transform: scaleX(0.12); }
  .person__img img, .area::after, .person__img::after, .more svg, .cta__link svg { transition-duration: 1ms; }
  .person:hover .person__img img { transform: none; }
}

/* 10. Rechtstexte ------------------------------------------------------- */
.legal { padding-bottom: var(--section); }
.legal__body { max-width: 44em; }
.legal__body h2 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); margin: 2.5em 0 0.75em; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { font-size: 1.125rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.02em; margin: 1.75em 0 0.5em; }
.legal__body p, .legal__body li { color: var(--ink); }
.legal__body ul { padding-left: 1.2em; margin-bottom: 1em; }
.legal__body dl { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: 0.4rem 1.5rem; margin: 0 0 1.5em; }
.legal__body dt { font-family: var(--sans); font-weight: 600; font-size: var(--fs-sm); padding-top: 0.2em; color: var(--ink-2); }
.legal__body dd { margin: 0; }
@media (max-width: 40em) { .legal__body dl { grid-template-columns: 1fr; } .legal__body dd { margin-bottom: 0.6rem; } }
.legal__body { overflow-wrap: anywhere; }
/* 404 */
.error-page { min-height: 55vh; }
.error-page .page-head { padding-bottom: var(--space-5); }
.error-page__actions { margin-top: var(--space-4); }
.error-page__alt { margin-top: var(--space-4); font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-2); }
.site-footer--min { padding-top: 0; }
.site-footer--min .site-footer__bottom { margin-top: 0; }