/* =========================================================
   Kanzlei Stapf — Stylesheet
   ========================================================= */

/* Design-Tokens (Farben, Fonts, Layout) — Single Source of Truth.
   @import muss vor allen Regeln stehen. */
@import url('tokens.css?ver=1.2.0');

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
address { font-style: normal; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ─── CUSTOM PROPERTIES ──────────────────────────────────── */
/* Alle Design-Tokens liegen jetzt in tokens.css (siehe @import oben). */

/* ─── BASE ───────────────────────────────────────────────── */
body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(4.5rem, 12vw, 9.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: 1.05rem; font-weight: 600; }

p { max-width: 68ch; }
section[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* ─── LAYOUT ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3.5rem);
}

.section-pad { padding: clamp(4rem, 9vw, 7rem) 0; }
.soft { background: var(--hell); }

/* ─── UTILITIES ──────────────────────────────────────────── */
.section-headline { margin-bottom: 0.6rem; }
.section-sub {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 3rem;
  max-width: 58ch;
}
.hinweis-klein { font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; }

/* ─── SCROLL REVEAL (Emil Kowalski: only opacity + transform) */
/* ─── SCROLL-REVEAL ──────────────────────────────────────────
   Grundsatz: sichtbar ist der Standard. Versteckt wird nur, wenn
   JavaScript nachweislich läuft (Klasse `js`, gesetzt vom Inline-Skript im
   <head> und wieder entfernt, falls main.js nicht meldet). Vorher stand hier
   `opacity: 0` ohne Bedingung: war JS aus oder main.js nicht geladen, blieb
   die halbe Seite unsichtbar, inklusive Rechtsgebieten, Über mich und Kontakt.
   Reduced Motion ist davon unberührt und weiter unten geregelt.          */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; }

.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
}
.reveal-stagger > *.visible { opacity: 1; transform: none; }

/* ─── SKIP LINK ──────────────────────────────────────────── */
.skip {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--rot);
  color: var(--weiss);
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 9999;
  font-size: 0.9rem;
}
.skip:focus { top: 0; }

/* ─── FOCUS VISIBLE (keyboard navigation) ────────────────── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero a:focus-visible,
.cta-strip a:focus-visible,
.site-footer a:focus-visible,
.nav-link:focus-visible,
.nav__menu a:focus-visible {
  outline-color: var(--weiss);
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    color 200ms var(--ease-out),
    transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn--rot {
  background: var(--rot);
  color: var(--weiss);
  border-color: var(--rot);
}
@media (hover: hover) and (pointer: fine) {
  .btn--rot:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
}

.btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.35);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { border-color: rgba(255,255,255,0.7); color: var(--weiss); }
}

.btn--hell {
  background: var(--weiss);
  color: var(--rot);
  border-color: var(--weiss);
}
@media (hover: hover) and (pointer: fine) {
  .btn--hell:hover { background: var(--hell); }
}

.btn--weiss {
  background: rgba(255,255,255,0.12);
  color: var(--weiss);
  border-color: rgba(255,255,255,0.4);
}
@media (hover: hover) and (pointer: fine) {
  .btn--weiss:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.65); }
}

/* ─── HERO-LOGO-OVERLAY ─────────────────────────────────── */
/* Logo hängt im Hero per padding-top frei (nicht abgeschnitten) und schrumpft
   beim Scrollen über transform-origin:top + kleinem yOffset (JS) exakt in die
   Header-Mitte. */
#hero-logo-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14px;
  pointer-events: none;
  transform-origin: center top;
  will-change: transform;
}
.hero-overlay-logo-wrap {
  position: relative;
  display: block;
}
.hero-overlay-logo {
  height: 80px;
  width: auto;
  display: block;
}
/* Farbige Variante liegt deckungsgleich über der weißen — Cross-Fade via JS */
.hero-overlay-logo--farbe {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
/* Bis 900px (solange der Menüknopf steht): kein Overlay, Header-Logo immer sichtbar */
@media (max-width: 900px) {
  #hero-logo-overlay { display: none; }
}

/* ─── HEADER ─────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  will-change: transform, opacity;
  transition:
    background-color 250ms var(--ease-out),
    border-bottom-color 250ms var(--ease-out),
    box-shadow 250ms var(--ease-out),
    backdrop-filter 250ms var(--ease-out);
  border-bottom: 1px solid transparent;
}

/* Top-Scrim: sichert Nav-/Logo-Lesbarkeit über dem aufklarenden Hero */
.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(to bottom, oklch(0.08 0.012 30 / 0.45), transparent);
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: opacity 250ms var(--ease-out);
}
.site-header.scrolled::before { opacity: 0; }

.site-header.scrolled {
  background: oklch(1 0 0 / 0.93);
  border-bottom-color: var(--linie);
  box-shadow: 0 2px 20px oklch(0 0 0 / 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-header.scrolled .nav__menu a { color: var(--ink); }
.site-header.scrolled .nav__toggle span { background: var(--ink); }
.site-header.scrolled .nav__tel { color: var(--rot) !important; }

/* ─── NAV ────────────────────────────────────────────────── */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  width: 100%;
}
/* Die 1fr-Spalten dürfen nicht über ihren Anteil hinauswachsen, sonst schiebt
   die breitere Seite (rechts: zwei Links, Telefon, CTA) das mittige Logo aus
   der Mitte und das Hero-Overlay landet beim Schrumpfen daneben. */
.nav-left, .nav-right { min-width: 0; }

/* Header-Logo auf Desktop verstecken — Overlay übernimmt die visuelle Darstellung */
@media (min-width: 901px) {
  .site-header .logo { visibility: hidden; }
}

/* ── Logo — centered ── */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-out);
}
.site-header.scrolled .logo { transform: scale(0.88); }

.logo__img {
  height: 46px;
  width: auto;
  display: block;
  transition: opacity 220ms var(--ease-out);
}
.logo__img--farbe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.site-header.scrolled .logo__img--weiss { opacity: 0; }
.site-header.scrolled .logo__img--farbe { opacity: 1; }

/* ── Nav Left / Right — beide Gruppen zum zentralen Logo orientiert,
   damit der Abstand zum Logo links wie rechts identisch ist (Symmetrie). ── */
.nav-left {
  display: flex;
  align-items: center;
  gap: 36px;
  justify-content: flex-end;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-content: flex-start;
}

.nav-link {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s var(--ease-out);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover { color: var(--weiss); }
  .nav-link:hover::after { transform: scaleX(1); }
}
.nav-link[aria-current="true"] { color: var(--weiss); }
.nav-link[aria-current="true"]::after {
  transform: scaleX(1);
  background: rgba(255,255,255,0.38);
}
.site-header.scrolled .nav-link { color: var(--muted); }
.site-header.scrolled .nav-link[aria-current="true"] { color: var(--rot); }
.site-header.scrolled .nav-link[aria-current="true"]::after { background: var(--rot); }
@media (hover: hover) and (pointer: fine) {
  .site-header.scrolled .nav-link:hover { color: var(--ink); }
}

/* ── Separator ── */
.nav-sep {
  display: block;
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.22);
  flex-shrink: 0;
  transition: background 200ms var(--ease-out);
}
.site-header.scrolled .nav-sep { background: var(--linie); }

.nav__tel {
  color: oklch(0.78 0.09 30) !important;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
  font-size: 0.83rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms var(--ease-out);
  white-space: nowrap;
}

/* Telefonnummer im Desktop-Header (im Mobilmenü steht die eigene Variante).
   Erst ab 1200px: Darunter ist der Container schmaler als seine max-width von
   1140px, die rechte Grid-Spalte würde über ihr 1fr hinauswachsen und das
   mittige Logo aus der Mitte drücken. Das Hero-Overlay landet dann beim
   Schrumpfen nicht mehr auf dem Header-Logo. Lieber die Nummer weglassen als
   die Kopfzeile verschieben; im Kontaktbereich steht sie ohnehin. */
.nav__tel--desktop {
  display: none;
  align-items: center;
  gap: 0.4rem;
}
.nav__tel--desktop svg { width: 15px; height: 15px; flex: none; }
@media (min-width: 1200px) {
  .nav__tel--desktop { display: inline-flex; }
}
/* Über dem dunklen Hero hell, im weißen Header terrakotta wie die übrige Nav */
@media (hover: hover) and (pointer: fine) {
  .nav__tel--desktop:hover { color: var(--weiss) !important; }
  .site-header.scrolled .nav__tel--desktop:hover { color: var(--rot-dunkel) !important; }
}

.nav__cta {
  background: var(--rot) !important;
  color: var(--weiss) !important;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms var(--ease-out), transform 160ms var(--ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  .nav__cta:hover { background: var(--rot-dunkel) !important; transform: translateY(-1px); }
}
.nav__cta:active { transform: scale(0.97); }

/* ── Hamburger ──
   44px: die Fläche, die sich auf dem Handy zuverlässig treffen lässt. Vorher
   waren es 35 × 27px, was den wichtigsten Knopf der mobilen Seite zum
   kleinsten machte. Die drei Striche bleiben optisch gleich, nur die
   Trefferfläche wächst. */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  z-index: 110;
  grid-column: 3;
  justify-self: end;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--weiss);
  border-radius: 2px;
  transition: transform 250ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__menu { display: none; }

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  /* Farbiger Hero statt Foto:
     warmer Rust-Verlauf der Markenpalette + dezenter Glow oben rechts */
  background-color: oklch(0.13 0.022 30);
  background-image:
    radial-gradient(125% 115% at 80% 12%,
      oklch(0.40 0.115 30 / 0.55) 0%, transparent 56%),
    linear-gradient(150deg,
      oklch(0.22 0.055 30) 0%,
      oklch(0.15 0.032 30) 52%,
      oklch(0.10 0.017 30) 100%);
  background-size: cover;
  background-position: center;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  position: relative;
  padding: calc(var(--header-h) + 5rem) 0 4rem;
  color: var(--weiss);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 79px,
    rgba(255,255,255,0.012) 79px,
    rgba(255,255,255,0.012) 80px
  );
  pointer-events: none;
}

.hero__container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3rem;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3.5rem);
}

.hero__content {
  max-width: 780px;
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  @starting-style {
    opacity: 0;
    transform: translateY(28px);
  }
}

.hero__headline {
  font-family: var(--serif);
  font-size: clamp(5rem, 13vw, 9.5rem);
  font-style: normal;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--weiss);
  margin-bottom: 2rem;
  text-wrap: balance;
}

.hero__sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.74);
  max-width: 50ch;
  margin-bottom: 0.75rem;
  line-height: 1.75;
}

.hero__meta {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.56);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--sans);
  margin-bottom: 2.25rem;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Vertikaler Marken-Marker rechts (Munro Partners) */
.hero__marke {
  grid-column: 2;
  justify-self: end;
  align-self: center;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.40);
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

/* ─── RECHTSGEBIETE (Expanding Panels) ──────────────────── */
#rechtsgebiete { padding: clamp(4rem, 9vw, 7rem) 0; }

/* Kopfzeile: Titel/Text links, CTA rechts */
.rg-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.rg-head .section-sub { margin-bottom: 0; }
.rg-head__cta {
  flex: none;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--rot);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  /* Tippfläche 44px hoch, die Unterkante bleibt optisch am Text */
  display: inline-flex;
  align-items: flex-end;
  min-height: 44px;
  padding-bottom: 3px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.rg-head__cta:hover { color: var(--rot-dunkel); border-color: var(--rot); }

/* Panel-Reihe: gleich breite Bild-Kacheln, die beim Hover aufklappen */
.rg-panels {
  display: flex;
  gap: 6px;
  height: clamp(320px, 46vw, 440px);
}
.rg-panel {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  min-width: 0;
  border-radius: var(--radius);
  background: var(--hell);
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  transition: flex-grow 550ms var(--ease-out);
}
.rg-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.rg-panel__label {
  position: relative;
  width: 100%;
  padding: 1.15rem 1.1rem;
  color: var(--weiss);
  background: linear-gradient(to top, rgba(20, 14, 10, 0.82), rgba(20, 14, 10, 0));
}
.rg-panel__nr {
  display: block;
  font-family: var(--serif);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.25rem;
  font-feature-settings: "tnum";
}
.rg-panel__title {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.2;
  hyphens: auto;
  overflow-wrap: anywhere;
}

@media (hover: hover) and (pointer: fine) {
  .rg-panels:hover .rg-panel { flex-grow: 0.75; }
  .rg-panels .rg-panel:hover { flex-grow: 3; }
  .rg-panel:hover img { transform: scale(1.05); }
}
.rg-panel:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
  flex-grow: 3;
}
.rg-hinweis { margin-top: 1rem; }

/* Mobil: aus der Reihe wird ein 2-spaltiges Raster (lesbar, ohne Hover) */
@media (max-width: 720px) {
  .rg-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    height: auto;
  }
  .rg-panel { aspect-ratio: 4 / 5; }
}

/* ─── ÜBER RA STAPF ─────────────────────────────────────── */
#ueber { padding: clamp(4rem, 9vw, 7rem) 0; }

.ueber-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}

.ueber-text blockquote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 600;
  color: var(--rot);
  line-height: 1.3;
  margin-bottom: 1.5rem;
  font-style: normal;
  quotes: none;
  max-width: none;
}

.ueber-text p {
  font-size: 0.97rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1rem;
}

/* Kennzahlen-Block — Label/Wert mit Trennlinien (Munro "Who We Are") */
.kennzahlen {
  margin-top: 1.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--linie);
}
.kennzahl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linie);
}
.kennzahl__wert {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--rot);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.kennzahl__label {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--muted);
  text-align: right;
  line-height: 1.4;
}
.ueber-zulassung {
  margin-top: 1.25rem;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.65;
}

/* Initialen-Portrait für Einzelanwalt */
.anwalt-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.anwalt-foto {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: var(--hell);
  box-shadow: 0 18px 40px -24px oklch(0.14 0.015 30 / 0.45);
}

.anwalt-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.anwalt-foto::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--rot);
}

.anwalt-meta {
  text-align: center;
}
.anwalt-meta strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.anwalt-meta span {
  font-size: 0.82rem;
  color: var(--rot);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ─── WERDEGANG & EXPERTISE (animierte Timeline) ─────────── */
#expertise {
  padding: clamp(4.5rem, 10vw, 8rem) 0;
}

.werdegang-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: start;
}

.werdegang-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: 1rem;
}

.werdegang-titel {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.12;
  margin-bottom: 1.5rem;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

.werdegang-text {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.75;
  margin-bottom: 1rem;
  max-width: 46ch;
}

/* Werdegang-Timeline.
   Track grau, Akzentlinie terrakotta „zeichnet" sich beim Reinscrollen (scaleY),
   Punkte poppen gestaffelt im Takt, aktuelle Station mit Glow. */
.timeline {
  position: relative;
  list-style: none;
  padding-left: 2.5rem;
}

/* Grauer Hintergrund-Track */
.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--linie);
  border-radius: 2px;
}

/* Laufende Akzent-Linie (top → bottom) */
.timeline::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--rot);
  border-radius: 2px;
  transform-origin: top center;
  transition: transform 1.15s var(--ease-out);
}
.js .timeline::after { transform: scaleY(0); }
.timeline.is-visible::after { transform: scaleY(1); }

.timeline__item {
  position: relative;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
/* Nur mit laufendem JavaScript verstecken, siehe Kommentar bei .js .reveal */
.js .timeline__item {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 0.22s + 0.32s);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline.is-visible .timeline__item { opacity: 1; transform: none; }

/* Punkte poppen im Takt rein */
.timeline__item::before {
  content: '';
  position: absolute;
  left: -2.5rem;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--weiss);
  border: 3px solid var(--linie);
  transition:
    transform 500ms var(--ease-out),
    border-color 400ms ease,
    background 400ms ease;
  transition-delay: calc(var(--i, 0) * 0.22s + 0.25s);
}
.js .timeline__item::before { transform: scale(0); }
.timeline.is-visible .timeline__item::before { transform: scale(1); }

.timeline__item--current::before {
  border-color: var(--rot);
  background: var(--rot);
  box-shadow: 0 0 0 5px var(--rot-glas);
}

.timeline__period {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: 0.5rem;
}

.timeline__title {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
}

.timeline__text {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 42ch;
}

/* ─── BEWERTUNGEN (infinite scroll columns) ─────────────── */
/* Großzügige Polsterung: mehr Luft + mehr Farbfläche oben/unten,
   damit die Sektion nicht eingeengt wirkt. */
#stimmen { padding: clamp(5rem, 11vw, 8.5rem) 0; }
#stimmen .section-sub { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Quellenhinweis und Weg zum Google-Profil unter dem Bewertungs-Karussell */
.stimmen-fuss {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.stimmen-fuss .hinweis-klein { margin-top: 0; max-width: 52ch; }
.stimmen-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--rot);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: oklch(0.47 0.12 30 / 0.35);
  transition: text-decoration-color 180ms var(--ease-out);
}
.stimmen-link svg { width: 14px; height: 14px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .stimmen-link:hover { text-decoration-color: var(--rot); }
}

@keyframes testi-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.testi-stage {
  display: flex;
  gap: 1.25rem;
  max-height: 700px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom,
    transparent, black 18%, black 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent, black 18%, black 82%, transparent);
}

.testi-col { flex: 1; min-width: 0; }
.testi-col--2,
.testi-col--3 { display: none; }

@media (min-width: 768px)  { .testi-col--2 { display: block; } }
@media (min-width: 1024px) { .testi-col--3 { display: block; } }

.testi-track {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  animation: testi-scroll var(--dur, 18s) linear infinite;
}
.testi-track:hover { animation-play-state: paused; }

.testi-card {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.testi-stars {
  color: var(--rot);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.7rem;
}

.testi-text {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 1.1rem;
  max-width: none;
}

.testi-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.testi-initial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rot-glas);
  color: var(--rot);
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testi-name {
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.testi-date {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.3;
}

/* ─── CTA STRIP ──────────────────────────────────────────── */
.cta-strip {
  background: var(--rot);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.cta-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-strip__text {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--weiss);
  max-width: none;
  line-height: 1.25;
  flex: 1;
  min-width: 200px;
}

/* ─── KONTAKT ────────────────────────────────────────────── */
#kontakt { padding: clamp(4rem, 9vw, 7rem) 0; }

.kontakt-raster {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.kontakt-info h2 { margin-bottom: 1.5rem; }

/* Zwei Standorte nebeneinander */
.kontakt-standorte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  margin-bottom: 1.5rem;
}

.kontakt-standort-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: 0.4rem;
  display: block;
}

.kontakt-info address {
  line-height: 1.95;
  font-size: 0.92rem;
  color: var(--ink);
}

.kontakt-info .kontakt-tel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}

.kontakt-info p { margin-bottom: 0.6rem; font-size: 0.95rem; max-width: none; }
.kontakt-info a {
  color: var(--rot);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: oklch(0.47 0.12 30 / 0.4);
  transition: text-decoration-color 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .kontakt-info a:hover { text-decoration-color: var(--rot); }
}
/* Telefon, E-Mail und Anfahrt sind die Links, die auf dem Handy wirklich
   getippt werden. Sie waren 20px hoch, jetzt 44px, ohne dass der Text größer
   wird (die Fläche wächst nach oben und unten). */
.kontakt-tel p { margin: 0; }
.kontakt-tel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.kontakt-hinweis {
  font-size: 0.84rem;
  color: var(--muted);
  margin-top: 1.5rem;
  max-width: 38ch;
  line-height: 1.65;
}

/* Erreichbarkeit läuft über beide Spalten, damit der Satz nicht umbricht */
.kontakt-erreichbarkeit { grid-column: auto; } /* seit 27.10. nur eine Anschrift */
.kontakt-erreichbarkeit p {
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.7;
  max-width: 46ch;
}
/* Die Zeiten selbst tragen etwas mehr Gewicht als der Zusatz darunter */
.kontakt-zeiten {
  font-weight: 500;
  font-feature-settings: "tnum";
  margin-bottom: 0.2rem;
}
.kontakt-erreichbarkeit p + p { color: var(--muted); font-size: 0.86rem; }

/* Anliegen: statt Formular die zwei Wege, die wirklich ankommen */
.kontakt-anliegen h2 { margin-bottom: 1rem; }
.kontakt-anliegen__text {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: 1.75rem;
}
.kontakt-wege {
  display: grid;
  gap: 1rem;
}
.kontakt-weg {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    transform 160ms var(--ease-out);
}
.kontakt-weg .kontakt-standort-label { margin-bottom: 0.2rem; }
.kontakt-weg__wert {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.kontakt-weg__zusatz {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.55;
}
.kontakt-weg:active { transform: scale(0.98); }
.kontakt-weg:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .kontakt-weg:hover {
    border-color: var(--rot);
    box-shadow: 0 6px 22px oklch(0.47 0.12 30 / 0.10);
  }
}

/* ─── ANFAHRT / KARTE (Click-to-Load) ────────────────────── */
.anfahrt {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.anfahrt__titel {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.anfahrt-karte {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 440px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--hell);
  /* dezenter Karten-Raster-Look hinter dem Platzhalter */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 39px, oklch(0.47 0.12 30 / 0.05) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, oklch(0.47 0.12 30 / 0.05) 39px 40px);
}
.anfahrt-karte iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.anfahrt-karte--geladen { background: none; }
.anfahrt-karte__platzhalter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.85rem;
  padding: 1.5rem;
}
.anfahrt-pin {
  color: var(--rot);
  filter: drop-shadow(0 4px 10px oklch(0.47 0.12 30 / 0.3));
}
.anfahrt-adresse {
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 500;
  margin: 0;
}
.anfahrt-laden { margin-top: 0.25rem; }
.anfahrt-dsgvo {
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 34ch;
  margin: 0;
  line-height: 1.55;
}

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.66);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 1.5rem;
}
.footer__brand {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--weiss);
  margin-bottom: 0.6rem;
  display: block;
  letter-spacing: -0.01em;
}
.footer__logo {
  height: 50px;
  width: auto;
  display: block;
  margin-bottom: 1.1rem;
}
.footer__adresse { line-height: 2; font-size: 0.87rem; }
.footer__adresse a { color: rgba(255,255,255,0.66); }
@media (hover: hover) and (pointer: fine) {
  .footer__adresse a:hover { color: var(--weiss); }
}
.footer__label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.48);
  margin-bottom: 1rem;
  display: block;
}
.footer__links { display: flex; flex-direction: column; }
.footer__links a {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.66);
  /* Tippfläche statt reiner Textzeile, siehe Kommentar am Hamburger */
  display: flex;
  align-items: center;
  min-height: 44px;
}
.footer__adresse a { display: inline-flex; align-items: center; min-height: 40px; }
@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover { color: var(--weiss); }
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: rgba(255,255,255,0.55);
}
.footer__bottom a {
  color: rgba(255,255,255,0.55);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (hover: hover) and (pointer: fine) {
  .footer__bottom a:hover { color: rgba(255,255,255,0.85); }
}

/* ─── RECHTSSEITEN (Impressum / Datenschutz) ─────────────── */
.nav__back {
  grid-column: 3;
  justify-self: end;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--rot);
}
@media (hover: hover) and (pointer: fine) {
  .nav__back:hover { color: var(--rot-dunkel); }
}

/* Legal-Seiten-Header (Impressum/Datenschutz) — eigene Struktur, sonst
   überlappen Logo/Zurück-Link und die Überschrift auf Mobil. */
.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 40px; width: auto; display: block; }
.brand__logo--weiss { display: none; }          /* Header ist immer hell → nur farbige Variante */
/* Inhalt unter den fixen Header schieben (main hat sonst kein Top-Offset). */
body.rechtstext main { padding-top: var(--header-h); }

.recht-inhalt {
  padding: 3rem 0 clamp(4rem, 8vw, 6rem);
  max-width: 760px;
}
.recht-inhalt h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.recht-inhalt h2 {
  font-size: 1.25rem;
  margin: 2.5rem 0 0.6rem;
}
.recht-inhalt p,
.recht-inhalt address,
.recht-inhalt li {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}
.recht-inhalt a {
  color: var(--rot);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.recht-hinweis {
  background: var(--hell);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  margin: 1.5rem 0 0;
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .werdegang-inner { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 3.5rem); }
}

/* Menüknopf bis 900px. Darüber passt die Kopfleiste, darunter nicht mehr
   (gemessen 25.10.: „Beratung anfragen“ ragte bei 769–833px über den Rand,
   und zwischen 769 und 900px fehlte jeder Weg zu den Rechtsgebieten). */
@media (max-width: 900px) {
  .header-inner { grid-template-columns: auto 1fr auto; }
  .nav-left  { display: none; }
  .nav-right { display: none; }
  .nav__toggle { display: flex; }

  /* Das Menü ist position: fixed innerhalb des Headers. will-change: transform
     und backdrop-filter am Header machen ihn zum Bezugsrahmen, dann war das
     Vollbild-Menü nur 67px hoch und drei Links lagen über dem Bildschirm
     (gemessen 25.10., Chromium und WebKit). Hier braucht der Header beides
     nicht: Das Einfahren per JS läuft nur auf Desktop. */
  .site-header { will-change: auto; }
  .site-header.scrolled {
    background: oklch(1 0 0 / 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav__menu {
    display: flex;
    position: fixed;
    inset: 0;
    background: #130b07;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 105;
    transform: translateX(100%);
    /* Geschlossen unsichtbar und nicht per Tab erreichbar; visibility
       springt erst um, wenn das Menü hinausgeglitten ist. */
    visibility: hidden;
    transition: transform 320ms var(--ease-drawer), visibility 0s linear 320ms;
  }
  .nav__menu.offen {
    transform: translateX(0);
    visibility: visible;
    transition: transform 320ms var(--ease-drawer), visibility 0s linear 0s;
  }
  .nav__menu a {
    font-size: 1.3rem;
    color: rgba(255,255,255,0.85) !important;
    /* Trefferfläche über die Textzeile hinaus, siehe Kommentar am Hamburger */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 0.75rem;
  }
  /* Auf dem dunklen Menügrund bleiben X und Telefon hell, auch wenn der
     gescrollte Header sonst dunkle Farben setzt. */
  .site-header.scrolled .nav__toggle[aria-expanded="true"] span,
  .site-header .nav__toggle[aria-expanded="true"] span { background: var(--weiss); }
  .site-header.scrolled .nav__menu .nav__tel,
  .site-header .nav__menu .nav__tel { color: rgba(255,255,255,0.85) !important; }
  .nav__menu-ort {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.02em;
    font-feature-settings: "tnum";
  }
  .nav__cta {
    font-size: 1rem;
    padding: 0.65rem 2rem;
  }
}

@media (max-width: 768px) {
  /* Marken-Marker nur auf Desktop */
  .hero__marke { display: none; }

  .ueber-raster { grid-template-columns: 1fr; }
  .anwalt-portrait { order: -1; }
  .anwalt-foto { max-width: 240px; }

  .kontakt-raster { grid-template-columns: 1fr; }
  .kontakt-standorte { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  .cta-strip .container { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { justify-content: center; text-align: center; }
  .kontakt-standorte { grid-template-columns: 1fr; }
}

/* ─── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }

  /* Mit `.js` davor, damit diese Regeln die `.js .reveal`-Regeln oben sicher
     überstimmen (gleiche Spezifität, spätere Stelle gewinnt). Ohne das
     Präfix wäre `.js .reveal { opacity: 0 }` spezifischer und die Seite
     bliebe bei reduzierter Bewegung leer, bis JavaScript nachhilft. */
  .reveal,
  .reveal-stagger > *,
  .js .reveal,
  .js .reveal-stagger > * {
    opacity: 1;
    transform: none;
  }

  /* Timeline ohne Animation: alles direkt sichtbar */
  .timeline__item,
  .js .timeline__item { opacity: 1; transform: none; }
  .timeline__item::before,
  .js .timeline__item::before { transform: scale(1); }
  .timeline::after,
  .js .timeline::after { transform: scaleY(1); }

  .hero__content {
    @starting-style { opacity: 1; transform: none; }
  }

  .testi-track { animation: none; }
  .testi-stage {
    max-height: none;
    flex-wrap: wrap;
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* Logo-Animation bei reduced-motion deaktivieren */
  .site-header { transform: none !important; opacity: 1 !important; }
  .site-header .logo { visibility: visible !important; }
  #hero-logo-overlay { display: none !important; }
}

/* --- MEGA MENU --- */
.has-mega { position: relative; }
.has-mega:hover .mega { display: block; animation: megaIn 0.18s ease forwards; }
.has-mega::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 25px; }

.mega {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100vw;
  max-width: none;
  background: var(--weiss);
  border: 0;
  border-top: 1px solid var(--linie);
  box-shadow: 0 18px 40px rgba(10, 46, 77, 0.08);
  padding: 3rem 0;
  z-index: 120;
  border-radius: 0;
  transform: none;
}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.mega__container {
  display: grid;
  grid-template-columns: 1fr 1fr 240px;
  gap: 4rem;
  width: 100%;
  max-width: var(--maxw, 1200px);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.mega__col {
  display: flex;
  flex-direction: column;
}

.mega__eyebrow {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rot);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.mega__heading {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.mega__desc {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 2rem;
  min-height: 4.5rem;
}

.mega__list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.mega__list li {
  border-top: 1px solid var(--linie);
}
.mega__list li:last-child {
  border-bottom: 1px solid var(--linie);
}
.mega__list a {
  font-family: var(--sans);
  display: flex;
  align-items: center;
  padding: 1rem 0;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  transition: padding-left 0.2s ease, color 0.2s;
}
.mega__list a:hover {
  color: var(--rot);
  padding-left: 0.5rem;
}
.mega__list .num {
  color: var(--rot);
  font-weight: 600;
  opacity: 0.8;
  margin-right: 1rem;
  font-size: 0.9rem;
}
.mega__list .arrow {
  margin-left: auto;
  color: var(--rot);
}

.mega__card {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
.mega__card-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center top;
  border-bottom: 1px solid var(--linie);
}
.mega__card-body {
  padding: 1.5rem;
  background: var(--sand);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.mega__card-body h4 {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
  color: var(--ink);
  font-weight: 600;
}
.mega__card-body p {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 0;
}
.mega__card-body a:not(.btn) {
  color: var(--rot);
  text-decoration: none;
  font-weight: 600;
}
.mega__card-body a:not(.btn):hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .has-mega { display: none; }
}

@keyframes testi-scroll-reverse {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}
.testi-col.reverse .testi-track {
  animation-name: testi-scroll-reverse;
}