/* haible rechtsanwaltskanzlei — Relaunch Mock
   Schrift: Helvetica Neue (Systemschrift)
   Farben und Logo stammen aus dem Original-CI der Kanzlei — siehe CI.md */

:root {
  /* --- CI-Originalwerte -----------------------------------------------
     Quelle: Haible_logo_CI_Farben_4c.pdf (perla werbedesign, 2021).
     Nur diese zwei Farben sind im CI definiert; alles Weitere ist daraus
     abgeleitet. Aenderungen bitte hier und in CI.md nachziehen. */
  --ci-rot:  #82122F;   /* PANTONE 202 C          · CMYK 0/100/61/41 · RGB 130/18/47 */
  --ci-grau: #999898;   /* PANTONE Cool Gray 9 C  · CMYK 0/0/0/50    · RGB 153/152/152 */

  /* --- Abgeleitete Marken-Rottoene (Tints/Shades von --ci-rot) --------- */
  --bordeaux: var(--ci-rot);
  --bordeaux-dark: #5e0d22;    /* -28 % — Hover/Aktiv, Weiss darauf 13,5:1 */
  --bordeaux-light: #c794a1;   /*  45 % Tint */
  --bordeaux-tint: #e4cbd1;    /*  22 % Tint — Text auf Bordeaux, 6,6:1 */
  --bordeaux-wash: #f5ecee;    /*   8 % Tint — Flaechenton, vgl. Briefbogen-Wasserzeichen */

  /* --- Neutrale: neutral gehalten, weil PANTONE Cool Gray 9 C neutral ist */
  --black: #1a1919;
  --gray: #626161;             /* Sekundaertext, 6,2:1 auf Weiss */
  --line: #e3e1e1;
  --input-line: #828181;
  --paper: #f7f6f6;
  --on-dark: #d6d5d5;
  --on-dark-dim: var(--ci-grau);

  --error: #e02020;
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--black);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- Typografie ---------- */

.t-hero {
  font-size: clamp(40px, 6.6vw, 96px);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.t-title {
  font-size: clamp(34px, 3.9vw, 56px);
  font-weight: 200;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.t-h2 {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 200;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.t-h3 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 300;
  letter-spacing: -0.01em;
}
.t-lead { font-size: clamp(17px, 1.4vw, 18px); font-weight: 300; }
.t-body { font-size: 17px; font-weight: 300; }
.t-small { font-size: 15px; font-weight: 300; }
.t-caption { font-size: 13px; font-weight: 300; }

.label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Doppelbalken-Markenelement — die zwei Balken links im Logo.
   Verhaeltnis aus dem Original uebernommen: Balken 1,58 pt / Luecke 0,99 pt /
   Balken 3,03 pt, also 1 : 0,63 : 1,92. Die Hoehe folgt der Textzeile, so wie
   die Logobalken der Versalhoehe von "haible" folgen. */
.brand-bars { --bar: 2px; display: flex; gap: calc(var(--bar) * 0.63); flex-shrink: 0; }
.brand-bars i { display: block; width: var(--bar); height: 13px; background: currentColor; }
.brand-bars i + i { width: calc(var(--bar) * 1.92); }
.label-row { display: flex; align-items: center; gap: 10px; }

/* ---------- Buttons & Links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 264px;
  padding: 16px 40px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  font-family: var(--font);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:active { transform: scale(0.985); }
.btn-p { background: var(--bordeaux); color: #ffffff; }
.btn-p:hover { background: var(--bordeaux-dark); }
.btn-w { background: #ffffff; color: var(--black); }
.btn-w:hover { background: var(--bordeaux-tint); }
.btn-t {
  background: rgba(26, 25, 25, 0.45);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
}
.btn-t:hover { background: rgba(26, 25, 25, 0.78); border-color: #ffffff; }

.tl {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: color 0.3s var(--ease);
}
.tl-d { color: var(--black); }
.tl-d:hover { color: var(--bordeaux); }
.tl-l { color: #ffffff; }
.tl-l:hover { color: var(--bordeaux-tint); }
.contact-phone { color: inherit; font: inherit; }
.contact-phone:hover { color: var(--bordeaux); }

/* ---------- Kopfleiste ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 6.6vw;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.4s var(--ease);
}
.site-header.scrolled { box-shadow: 0 10px 30px rgba(26, 25, 25, 0.08); }
.site-header .logo img { width: 158px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 40px; }
.site-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black);
  transition: color 0.3s var(--ease);
}
.site-nav a:hover { color: var(--bordeaux); }
.site-nav a.active { color: var(--bordeaux); border-bottom: 1px solid var(--bordeaux); padding-bottom: 3px; }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--black);
  transition: transform 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: min(86vh, 820px);
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero-media { position: absolute; inset: 0; }
/* Graustufen fuer Hintergrundbilder -- so bleibt das Bordeaux die einzige
   Farbe im Bild und der weisse Satz behaelt seinen Kontrast. */
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.9);
  animation: hero-zoom 8s var(--ease) both;
}
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Zwei Verlaeufe: der senkrechte traegt die Fusszeile, der waagrechte die
     Ueberschrift links. Ein gleichmaessiger Schleier wuerde das Bild toeten,
     ohne den Text dort dunkler zu machen, wo er wirklich steht. */
  background:
    linear-gradient(180deg, rgba(26, 25, 25, 0.55) 0%, rgba(26, 25, 25, 0.42) 38%, rgba(26, 25, 25, 0.90) 100%),
    linear-gradient(90deg, rgba(26, 25, 25, 0.62) 0%, rgba(26, 25, 25, 0.12) 64%);
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 6.6vw 160px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1200px;
  color: #ffffff;
}
.hero-content .label-row { color: var(--on-dark); }
.hero-content .t-lead { color: var(--on-dark); }
.hero-cta { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.hero-facts {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(26, 25, 25, 0.55);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hero-facts div {
  padding: 24px;
  font-size: 13px;
  font-weight: 300;
  color: var(--on-dark);
  text-align: center;
}
.hero-facts div + div { border-left: 1px solid rgba(255, 255, 255, 0.16); }

/* Einblendung beim Laden */
.rise { opacity: 0; transform: translateY(28px); animation: rise 0.9s var(--ease) forwards; }
.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.16s; }
.rise-3 { animation-delay: 0.28s; }
.rise-4 { animation-delay: 0.4s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Scroll-Reveals (Framer-Motion-Sprache) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

.reveal-img { overflow: hidden; }
.reveal-img img {
  transform: scale(1.07);
  transition: transform 1.3s var(--ease);
  transition-delay: var(--d, 0s);
}
.in .reveal-img img, .reveal-img.in img { transform: scale(1); }

/* ---------- Sektionen ---------- */

.section { padding: clamp(72px, 9vw, 140px) 6.6vw; }
.section-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
}
.rule { width: 56px; height: 2px; background: var(--bordeaux); }
.muted { color: var(--gray); }

/* Rechtsgebiet-Panels */
.panel { display: grid; grid-template-columns: repeat(2, 1fr); }
.panel-media { position: relative; min-height: 560px; overflow: hidden; }
/* Bilder liegen in Graustufen und bekennen erst bei Beruehrung Farbe. So ist
   das Bordeaux im Ruhezustand die einzige Farbe der Seite -- und die Zuwendung
   des Besuchers wird beantwortet, statt dass das Bild von vornherein draengt.
   Angesprochen wird der Bildkasten, nicht das ganze Panel: Farbe folgt dem
   Zeigen auf das Bild, nicht dem Lesen der Liste daneben. Damit faellt der
   Tastaturweg weg -- im Bildbereich liegt nichts Fokussierbares, der Link
   sitzt in der Textspalte und behaelt seine eigene Fokusmarkierung. Die
   Farbe traegt keine Information, sie darf am Zeiger haengen. */
.panel-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: transform 0.6s var(--ease), filter 0.5s var(--ease);
}
.panel-media:hover img { transform: scale(1.03); filter: grayscale(0) contrast(1); }
.panel-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(48px, 6.6vw, 96px);
}
.panel-num { font-size: 15px; font-weight: 300; color: var(--bordeaux); }
.panel-list { display: flex; flex-direction: column; max-width: 460px; margin-top: 6px; }
.panel-list div { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; font-weight: 300; }
.panel-list div:last-child { border-bottom: 1px solid var(--line); }

.panel-dark { background: var(--black); color: #ffffff; }
.panel-dark .t-body, .panel-dark .panel-list div { color: var(--on-dark); }
.panel-dark .panel-num { color: var(--bordeaux-light); }
.panel-dark .panel-list div { border-color: rgba(255, 255, 255, 0.16); }
.panel-red { background: var(--bordeaux); color: #ffffff; }
.panel-red .t-body { color: var(--bordeaux-tint); }
.panel-red .panel-num { color: var(--bordeaux-tint); }
.panel-red .panel-list div { border-color: rgba(255, 255, 255, 0.22); color: #ffffff; }

/* Vita */
.vita { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--black); color: #ffffff; }
.vita-media { position: relative; min-height: 640px; overflow: hidden; }
.vita-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.5s var(--ease);
}
.vita-media:hover img { filter: grayscale(0) contrast(1); }
.vita-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(26, 25, 25,0) 55%, rgba(26, 25, 25,0.9) 100%);
}
.vita-media .placeholder-note {
  position: absolute; left: 32px; bottom: 24px; z-index: 1;
  font-size: 13px; font-weight: 300; color: var(--on-dark-dim);
}
.vita-body { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(56px, 7vw, 110px) clamp(48px, 6.6vw, 96px); }
.vita-body .label-row { color: var(--bordeaux-light); }
.timeline { display: flex; flex-direction: column; margin-top: 8px; }
.timeline > div {
  display: flex; align-items: baseline; gap: 28px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.timeline > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.timeline .year { font-size: 22px; font-weight: 200; color: var(--bordeaux-light); min-width: 130px; flex-shrink: 0; }
.timeline .what { font-size: 15px; font-weight: 300; color: var(--on-dark); }

/* Suche */
.search-row { display: flex; align-items: flex-end; gap: 32px; margin-top: 10px; max-width: 760px; }
.search-row input {
  flex: 1;
  border: 0;
  border-bottom: 1px solid var(--input-line);
  padding: 10px 0;
  font-size: 17px;
  font-weight: 300;
  font-family: var(--font);
  color: var(--black);
  background: transparent;
  border-radius: 0;
}
.search-row input:focus { outline: none; border-bottom: 2px solid var(--black); padding-bottom: 9px; }
.search-row input::placeholder { color: var(--gray); opacity: 1; }

/* Formular */
.contact-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 6.6vw, 96px); }
.form { display: flex; flex-direction: column; gap: 36px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray);
}
.field input, .field textarea {
  border: 0;
  border-bottom: 1px solid var(--input-line);
  padding: 8px 0;
  font-size: 17px;
  font-weight: 300;
  font-family: var(--font);
  color: var(--black);
  background: transparent;
  resize: vertical;
  border-radius: 0;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--black); padding-bottom: 7px; }
.field input::placeholder, .field textarea::placeholder { color: var(--gray); opacity: 1; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* FAQ */
.faq { display: flex; flex-direction: column; max-width: 860px; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%;
  padding: 24px 0;
  background: none; border: 0;
  font-family: var(--font);
  font-size: 20px; font-weight: 400; color: var(--black);
  text-align: left;
  cursor: pointer;
}
.faq-q .ind {
  font-size: 24px; font-weight: 200; color: var(--bordeaux);
  line-height: 1;
  transition: transform 0.4s var(--ease);
}
.faq-item.open .faq-q .ind { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}
.faq-a p { margin: 0 0 24px; font-size: 16px; font-weight: 300; color: var(--gray); max-width: 720px; }

/* CTA-Band */
.cta { background: var(--bordeaux); color: #ffffff; }
.cta .label-row { color: var(--bordeaux-tint); }
.cta .contact-lines { color: var(--bordeaux-tint); }
.cta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px 36px;
  margin-top: 36px;
}
.cta-contact-link {
  color: #ffffff;
  font-size: clamp(18px, 1.35vw, 21px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  transition: color 0.3s var(--ease);
}
.cta-contact-link:hover { color: var(--bordeaux-tint); }

/* Footer */
.site-footer { background: var(--black); color: var(--on-dark-dim); padding: 48px 6.6vw; display: flex; flex-direction: column; gap: 28px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-top .logo img { width: 128px; height: auto; }
.footer-links { display: flex; gap: 36px; flex-wrap: wrap; }
.footer-links a {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-dark-dim);
  transition: color 0.3s var(--ease);
}
.footer-links a:hover { color: #ffffff; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 22px;
  font-size: 13px; font-weight: 300;
}
/* Der Agenturhinweis ist der einzige Link, der aus der Website hinausfuehrt.
   Er soll als Link erkennbar sein, ohne sich vor die Angaben daneben zu
   draengen -- die allgemeine Regel `a { color: inherit }` liesse ihn sonst
   wie Fliesstext aussehen. */
.footer-bottom a {
  color: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.footer-bottom a:hover { color: #ffffff; border-bottom-color: #ffffff; }

/* Unterseiten-Hero */
/* Seitenkopf der Unterseiten. Das Bild ist wahlweise: liegt eines vor, fuellt
   es die Flaeche in Graustufen; sonst bleibt sie in CI-Schwarz und laesst die
   Typografie fuer sich stehen. Die Rechtsgebiete, die Vita, der Kontakt und
   Aktuelles zeigen eines; Impressum, Datenschutz und Cookie-Richtlinie nicht --
   ein Foto ueber einer Pflichtangabe wirkt wie Aufmachung an einer Stelle, die
   schlicht sein soll. Der Bordeaux-Strich unten zitiert den Fussbalken des
   Briefbogens. */
.page-hero {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--black);
  border-bottom: 5px solid var(--bordeaux);
}
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(0.9); }
/* Der Verlauf gilt nur, wenn wirklich ein Bild darunter liegt. Sonst wuerde er
   die schwarze Flaeche nur unnoetig fleckig machen. */
.page-hero:has(img)::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26, 25, 25, 0.50) 0%, rgba(26, 25, 25, 0.38) 45%, rgba(26, 25, 25, 0.88) 100%);
}
.page-hero .hero-content { padding-top: 88px; padding-bottom: 64px; gap: 22px; }
.page-hero .t-lead { max-width: 62ch; }

/* Kernpunkte */
.kernpunkte { display: flex; flex-direction: column; max-width: 860px; }
.kernpunkte > div {
  display: flex; align-items: baseline; gap: 36px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.kernpunkte > div:last-child { border-bottom: 1px solid var(--line); }
.kernpunkte .num { font-size: 22px; font-weight: 200; color: var(--bordeaux); min-width: 56px; }

/* ---------- Design-System-Seite ---------- */

.ds-section { display: flex; flex-direction: column; gap: 28px; }
.ds-divider { border: 0; border-top: 1px solid var(--line); margin: 0; }
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.swatch { display: flex; flex-direction: column; gap: 8px; }
.swatch .chip { height: 72px; }
.swatch .name { font-size: 13px; font-weight: 400; }
.swatch .hex { font-size: 12px; font-weight: 300; color: var(--gray); }
.spec-row { display: flex; align-items: baseline; gap: 32px; padding: 20px 0; border-top: 1px solid var(--line); }
.spec-row:last-child { border-bottom: 1px solid var(--line); }
.spec-row .spec { font-size: 12px; font-weight: 300; color: var(--gray); min-width: 230px; flex-shrink: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .section-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .panel, .vita { grid-template-columns: minmax(0, 1fr); }
  .panel-media { min-height: 320px; }
  .panel:nth-child(odd) .panel-media { order: -1; }
  .vita-media { min-height: 380px; }
}

@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-nav.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    padding: 8px 6.6vw 16px;
  }
  .site-nav.open a { padding: 12px 0; }
  .nav-toggle { display: flex; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { height: auto; min-height: 0; padding-top: 96px; }
  .hero-content { position: relative; padding-bottom: 220px; }
  .hero-facts { grid-template-columns: minmax(0, 1fr); }
  .hero-facts div { text-align: left; padding: 16px 6.6vw; }
  .hero-facts div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .hero-cta { flex-direction: column; }
  .btn { min-width: 0; width: 100%; }
  .cta-actions { align-items: flex-start; flex-direction: column; }
  .search-row { flex-direction: column; align-items: stretch; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .contact-cols { grid-template-columns: minmax(0, 1fr); }
  .panel-media { min-height: 240px; }
  .faq-q { font-size: 17px; }
}

@media (max-width: 560px) {
  /* Die Vita-Zeitleiste erzwingt sonst ueber Jahreszahlenspalte plus laengstes Wort
     eine Mindestbreite, die den Grid-Track ueber den Viewport hinaus aufzieht. */
  .vita-body { padding: clamp(40px, 7vw, 110px) clamp(22px, 6.6vw, 96px); }
  .timeline > div { flex-direction: column; gap: 2px; }
  .timeline .year { min-width: 0; }
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .hero-media img { animation: none; opacity: 1; transform: none; }
  .reveal, .reveal-img img { opacity: 1; transform: none; transition: none; }
  .panel-media img, .vita-media img, .faq-a, .faq-q .ind { transition: none; }
}

/* ---------- Rechtliches ---------- */
/* Die Rechtstexte verwenden dieselben ruhigen Flaechen, Gewichte und
   Markenakzente wie der restliche Auftritt. Definitionen bilden Kontaktdaten
   semantisch sauber ab und bleiben auf kleinen Geraeten lesbar. */
.rechtstext { max-width: 880px; overflow-wrap: break-word; }
.rechtstext a { overflow-wrap: anywhere; }
.rechtstext > *:first-child { margin-top: 0; }
.rechtstext p { margin: 0 0 20px; }
.legal-block {
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.legal-block:first-child { padding-top: 0; border-top: 0; }
.legal-block:last-child { padding-bottom: 0; }
.legal-block > .t-h3 { margin: 0 0 24px; color: var(--black); }
.legal-facts {
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  margin: 0;
  background: var(--paper);
  border-left: 3px solid var(--bordeaux);
}
.legal-facts dt,
.legal-facts dd {
  margin: 0;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.legal-facts dt {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bordeaux);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.legal-facts dd { font-weight: 300; }
.legal-facts > :nth-last-child(-n + 2) { border-bottom: 0; }
.legal-copy { margin-top: 24px !important; }
.legal-note { color: var(--gray); font-size: 15px; }
.rechtstext ul { margin: 0 0 18px; padding-left: 22px; }
.rechtstext li { margin-bottom: 10px; padding-left: 4px; }
.rechtstext a { color: var(--bordeaux); border-bottom: 1px solid rgba(130, 18, 47, 0.3); }
.rechtstext a:hover { border-bottom-color: var(--bordeaux); }

@media (max-width: 560px) {
  .legal-block { padding: 32px 0; }
  .legal-facts { grid-template-columns: minmax(0, 1fr); }
  .legal-facts dt { padding-bottom: 4px; border-bottom: 0; }
  .legal-facts dd { padding-top: 0; }
  .legal-facts > :nth-last-child(2) { border-bottom: 0; }
}