/* =========================================================
   Antifragiler Vertrieb · Dana Arzani
   CI aus dem freigegebenen Cover (28.07.2026)
   ========================================================= */

/* ---------- Fonts (lokal, DSGVO) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- CI-Variablen ---------- */
:root {
  --color-primary: #D8137D;   /* Magenta, Titeltypografie Cover */
  --color-primary-dark: #B00E64;
  --color-sage: #BAC5C1;      /* Salbeigrün, Hintergrund Cover */
  --color-sage-tint: #F1F4F3;
  --color-text: #1A1819;
  --color-text-soft: #4A4749;
  --color-bg: #FFFFFF;
  --color-line: #E4E7E6;

  --font-head: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max-width: 1160px;
  --read-width: 720px;
  --radius: 4px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
figure, blockquote { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 6.2vw, 68px); }
h2 { font-size: clamp(28px, 4vw, 42px); }
h3 { font-size: clamp(20px, 2.2vw, 25px); font-weight: 700; }
p  { margin: 0 0 20px; }
a  { color: var(--color-primary); }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.wrap--read { max-width: var(--read-width); }
section { padding: clamp(64px, 9vw, 116px) 0; }
.bg-tint { background: var(--color-sage-tint); }
.bg-sage { background: var(--color-sage); }
.bg-dark { background: var(--color-text); color: #fff; }
.bg-dark h2, .bg-dark h3 { color: #fff; }
.lead { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.6; color: var(--color-text-soft); }
.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
}
.bg-dark .eyebrow { color: var(--color-sage); }
.measure { max-width: 65ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  padding: 18px 32px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-text); }
.btn--ghost:hover { background: var(--color-text); color: #fff; }
.bg-dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.bg-dark .btn--ghost:hover { background: #fff; color: var(--color-text); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-note { font-size: 14px; color: var(--color-text-soft); margin: 14px 0 0; }
.bg-dark .btn-note { color: rgba(255,255,255,.7); }

/* ---------- Header ---------- */
.site-header {
  /* z-index MUSS über .mobile-menu (1050) liegen: der sticky Header bildet einen
     eigenen Stacking-Context, sonst liegt der Hamburger trotz z-index 1100 unter
     dem Drawer und das X ist nicht mehr klickbar. */
  position: sticky; top: 0; z-index: 1100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.header-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand {
  font-family: var(--font-head); font-weight: 800; font-size: 17px;
  letter-spacing: -0.01em; text-decoration: none; color: var(--color-text);
  display: inline-flex; align-items: baseline; gap: 8px;
}
/* Wortmarke einfarbig. Vorher stand "Vertrieb" im Marken-Magenta, was mit dem
   Leseprobe-Button konkurrierte, der im Header ebenfalls magenta ist.
   Entschieden mit Dana Arzani am 04.08.2026. Auf Magenta umstellen: color hier
   auf var(--color-primary) setzen. */
.brand span { color: inherit; }
.desktop-nav { display: none; }
@media (min-width: 768px) {
  .desktop-nav { display: flex; align-items: center; gap: 30px; }
  .desktop-nav a {
    font-size: 15px; font-weight: 500; text-decoration: none; color: var(--color-text);
  }
  .desktop-nav a:hover { color: var(--color-primary); }
  .desktop-nav .btn { padding: 12px 20px; font-size: 15px; color: #fff; }
}

/* ---------- Hamburger (Pflicht-Snippet) ---------- */
.hamburger {
  z-index: 1100; position: relative; background: transparent; border: 0;
  width: 44px; height: 44px; cursor: pointer; padding: 0;
}
.menu-overlay { z-index: 1000; }
.mobile-menu  { z-index: 1050; }
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--color-text, #1a1a1a);
  margin: 6px auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 2px;
}
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.menu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu-overlay.active { opacity: 1; visibility: visible; }
.mobile-menu {
  position: fixed; top: 0; right: 0;
  width: min(80vw, 360px); height: 100vh;
  background: var(--color-bg, #ffffff);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 80px 32px 32px;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu li { margin-bottom: 16px; }
.mobile-menu a { font-size: 20px; text-decoration: none; color: var(--color-text); }
@media (min-width: 768px) {
  .hamburger, .mobile-menu, .menu-overlay { display: none; }
}

/* ---------- Hero ---------- */
.hero { background: var(--color-sage); padding: clamp(48px, 7vw, 92px) 0; }
.hero-grid {
  display: grid; gap: clamp(36px, 5vw, 64px);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; }
}
.hero h1 { margin-bottom: 22px; }
.hero .lead { color: #2C2A2B; max-width: 46ch; }
.hero-figure { justify-self: center; }
.hero-figure img {
  width: min(380px, 78vw);
  border-radius: 2px;
  box-shadow: 0 24px 48px rgba(26,24,25,.26), 0 4px 12px rgba(26,24,25,.14);
}
/* Das 3D-Mockup bringt seinen Schatten im Alphakanal mit.
   Deshalb hier kein CSS-Schatten und keine abgerundete Ecke. */
.hero-figure--mockup img {
  width: min(420px, 70vw);
  border-radius: 0;
  box-shadow: none;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-size: 14px; font-weight: 500; color: #2C2A2B;
  margin: 26px 0 0; padding: 0; list-style: none;
}
.hero-meta li { display: flex; align-items: center; gap: 8px; }
.hero-meta li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary); flex: none;
}

/* ---------- Pull-Quote ---------- */
.pullquote {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(24px, 3.6vw, 40px); line-height: 1.2;
  letter-spacing: -0.02em; margin: 0; text-wrap: balance;
}
.pullquote cite {
  display: block; margin-top: 20px;
  font-family: var(--font-body); font-style: normal;
  font-size: 15px; font-weight: 500; letter-spacing: 0;
  color: var(--color-text-soft);
}
.bg-dark .pullquote cite { color: rgba(255,255,255,.62); }

/* ---------- Problem-Liste ---------- */
.problem-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 760px) { .problem-list { grid-template-columns: repeat(3, 1fr); gap: 34px; } }
.problem-list li { border-top: 3px solid var(--color-primary); padding-top: 20px; }
.problem-list h3 { margin-bottom: 10px; }
.problem-list p { margin: 0; color: var(--color-text-soft); font-size: 16px; }

/* ---------- Triade / Ampel ---------- */
.triade { display: grid; gap: 20px; margin-top: 44px; }
@media (min-width: 800px) { .triade { grid-template-columns: repeat(3, 1fr); } }
.triade-card {
  background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: 30px 26px 32px;
  display: flex; flex-direction: column;
}
.triade-card .dot { width: 14px; height: 14px; border-radius: 50%; margin-bottom: 18px; }
/* Echte Ampellogik: rot, gelb, grün. Bewusst nicht das Marken-Magenta für den
   dritten Zustand. Die Triade ist hier ein Erklärwerkzeug, und wer eine Ampel
   sieht, erwartet am Ende Grün. Entschieden mit Dana Arzani am 04.08.2026.
   Die Farbtöne sind auf die Palette abgestimmt, nicht die Signalfarben pur. */
.triade-card:nth-child(1) .dot { background: #C4342F; }
.triade-card:nth-child(2) .dot { background: #D9A32B; }
.triade-card:nth-child(3) .dot { background: #3B8E5A; }
.triade-card:nth-child(3) { border-color: #3B8E5A; border-width: 2px; }
.triade-card h3 { margin-bottom: 8px; }
.triade-card p { margin: 0; font-size: 16px; color: var(--color-text-soft); }
.triade-card .tag {
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-soft); margin-bottom: 6px;
}

/* ---------- Pfeiler ---------- */
.pfeiler { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 22px; counter-reset: p; }
@media (min-width: 700px) { .pfeiler { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
.pfeiler li {
  counter-increment: p; background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius); padding: 26px 26px 28px; position: relative;
}
.pfeiler li::before {
  content: counter(p, decimal-leading-zero);
  font-family: var(--font-head); font-weight: 800; font-size: 13px;
  color: var(--color-primary); letter-spacing: .1em; display: block; margin-bottom: 12px;
}
.pfeiler h3 { font-size: 20px; margin-bottom: 8px; }
.pfeiler p { margin: 0; font-size: 16px; color: var(--color-text-soft); }

/* ---------- Beweis / Zahlen ---------- */
.stats { list-style: none; padding: 0; margin: 44px 0 0; display: grid; gap: 30px; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats .num {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(34px, 4.4vw, 48px); line-height: 1;
  color: var(--color-primary); display: block; margin-bottom: 8px;
}
.bg-dark .stats .num { color: var(--color-sage); }
.stats p { margin: 0; font-size: 15px; color: var(--color-text-soft); }
.bg-dark .stats p { color: rgba(255,255,255,.76); }
.logos {
  display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center;
  margin: 36px 0 0; padding: 0; list-style: none;
}
.logos li {
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
  letter-spacing: .02em; color: var(--color-text-soft);
}
.bg-dark .logos li { color: rgba(255,255,255,.7); }

/* ---------- Kapitel-Liste ---------- */
.kapitel { list-style: none; padding: 0; margin: 40px 0 0; border-top: 1px solid var(--color-line); }
.kapitel li {
  display: grid; gap: 4px 22px; padding: 22px 0;
  border-bottom: 1px solid var(--color-line);
  grid-template-columns: 46px 1fr;
}
@media (min-width: 780px) { .kapitel li { grid-template-columns: 46px 1fr 1.1fr; align-items: baseline; } }
.kapitel .no {
  font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--color-primary);
}
.kapitel h3 { font-size: 19px; margin: 0; }
.kapitel p { margin: 0; font-size: 15px; color: var(--color-text-soft); grid-column: 2 / -1; }
@media (min-width: 780px) { .kapitel p { grid-column: auto; } }

/* ---------- Angebot / Leseprobe ---------- */
.offer {
  background: #fff; border: 2px solid var(--color-text); border-radius: var(--radius);
  padding: clamp(30px, 4vw, 52px); display: grid; gap: 32px;
}
@media (min-width: 860px) { .offer { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.offer ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.offer li { position: relative; padding-left: 30px; font-size: 16px; }
.offer li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 16px; height: 9px; border-left: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary); transform: rotate(-45deg);
}
.offer-figure img { width: min(260px, 60vw); margin: 0 auto; box-shadow: 0 16px 34px rgba(26,24,25,.2); }
.offer-figure--mockup img { width: min(320px, 66vw); box-shadow: none; }

/* ---------- Autorin ---------- */
.author-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 840px) { .author-grid { grid-template-columns: 340px 1fr; gap: 56px; } }
.author-figure img { border-radius: var(--radius); }
.author-figure figcaption { font-size: 13px; color: var(--color-text-soft); margin-top: 10px; }

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; border-top: 1px solid var(--color-line); }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 24px 44px 24px 0; position: relative;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(17px, 2vw, 20px); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .answer { padding: 0 0 26px; max-width: 68ch; color: var(--color-text-soft); }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- Formular ---------- */
.form-row { display: grid; gap: 12px; margin-top: 26px; max-width: 520px; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr auto; } }
.form-row input[type="email"] {
  font: inherit; padding: 17px 18px; border-radius: var(--radius);
  border: 2px solid var(--color-line); background: #fff; color: var(--color-text);
}
.form-row input[type="email"]:focus { border-color: var(--color-primary); outline: none; }
.form-hint { font-size: 13px; color: var(--color-text-soft); margin: 12px 0 0; max-width: 52ch; }
.bg-dark .form-hint { color: rgba(255,255,255,.62); }
.bg-dark .form-row input[type="email"] { border-color: rgba(255,255,255,.3); }

/* ---------- Magazin / Presse Karten ---------- */
.cards { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card {
  border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 28px; background: #fff;
}
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { font-size: 16px; color: var(--color-text-soft); }
.card a { font-weight: 600; text-decoration: none; }
.card a:hover { text-decoration: underline; }
.card .meta { font-size: 13px; color: var(--color-text-soft); margin-bottom: 8px; }
.empty-state {
  border: 2px dashed var(--color-line); border-radius: var(--radius);
  padding: clamp(36px, 6vw, 64px); text-align: center; margin-top: 40px;
}
.empty-state p { max-width: 46ch; margin: 0 auto; color: var(--color-text-soft); }

/* ---------- Presse: Assets + Kontakt ---------- */
.presse-cols { display: grid; gap: 32px; margin-top: 40px; }
@media (min-width: 820px) { .presse-cols { grid-template-columns: 1fr 1fr; gap: 44px; } }
.asset-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.asset-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border: 1px solid var(--color-line); border-radius: var(--radius); padding: 16px 18px;
  font-size: 15px;
}
.asset-list a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.contact-box {
  background: var(--color-sage-tint); border-radius: var(--radius);
  padding: 28px; font-size: 16px;
}
.contact-box a { text-decoration: none; font-weight: 500; }

/* ---------- Artikel / PM-Detail ---------- */
.article-body { max-width: var(--read-width); margin: 0 auto; }
.article-body h2 { margin-top: 48px; }
.article-body h3 { margin-top: 32px; }
.article-meta { font-size: 14px; color: var(--color-text-soft); margin-bottom: 28px; }
.breadcrumb { font-size: 14px; color: var(--color-text-soft); margin: 0 0 24px; }
.breadcrumb a { color: var(--color-text-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); }

/* ---------- Blog-Inhaltsverzeichnis (Pflicht-Snippet) ---------- */
.toc {
  background: rgba(0,0,0,0.04);
  border-left: 3px solid var(--color-primary, #00a0de);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 32px 0;
}
.toc-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-soft, #555);
  margin: 0 0 12px;
}
.toc ol {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.toc a {
  color: var(--color-primary, #00a0de);
  text-decoration: none;
  font-size: 14px;
}
.toc a:hover { text-decoration: underline; }

/* ---------- Artikel-Extras ---------- */
.article-body h2 { scroll-margin-top: 90px; }
.article-body blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.45;
  font-family: var(--font-head);
  font-weight: 600;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body blockquote cite {
  display: block; margin-top: 12px;
  font-family: var(--font-body); font-style: normal;
  font-size: 14px; font-weight: 500; color: var(--color-text-soft);
}
.article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 22px; }
.article-body li { margin-bottom: 10px; }
.article-cta {
  background: var(--color-sage-tint);
  border-radius: var(--radius);
  padding: 32px;
  margin-top: 56px;
}
.article-cta h2 { margin-top: 0; font-size: clamp(22px, 2.6vw, 28px); }
.article-cta p:last-of-type { margin-bottom: 20px; }

/* ---------- Footer (Pflicht-Snippet) ---------- */
.site-footer {
  background: #1a1a1a;
  color: rgba(255,255,255,0.85);
  padding: 48px 24px 32px;
  margin-top: 0;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between;
  font-size: 14px;
}
.footer-nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 24px; flex-wrap: wrap;
}
.footer-nav a, .footer-service a { color: inherit; text-decoration: none; }
.footer-nav a:hover, .footer-service a:hover { color: var(--color-primary, #00a0de); }
.copyright { margin: 0; }
.footer-social { display: flex; gap: 16px; align-items: center; }
.footer-social a {
  color: rgba(255,255,255,0.7);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease;
}
.footer-social a:hover { color: #fff; background: rgba(255,255,255,0.1); }
.footer-social svg { display: block; }
.footer-service a { font-size: 13px; opacity: 0.75; }

/* ---------- Impressum + Datenschutz ---------- */
body.legal-page main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 20px 64px;
}
body.legal-page main h1 {
  margin: 0 0 24px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
}
body.legal-page main .legal-content { max-width: 72ch; font-size: 1rem; line-height: 1.7; }
body.legal-page main .legal-content h2 {
  margin: 44px 0 12px; font-size: clamp(20px, 2.4vw, 26px);
}
body.legal-page main .legal-content h3 {
  margin: 28px 0 8px; font-size: 18px;
}
body.legal-page main .legal-content p,
body.legal-page main .legal-content ul { margin-bottom: 16px; }
body.legal-page main .legal-content ul { padding-left: 22px; }
body.legal-page main .legal-content li { margin-bottom: 8px; }
body.legal-page main .legal-content a {
  color: var(--color-primary); text-decoration: underline; word-break: break-word;
}
body.legal-page main .legal-content address { font-style: normal; }
/* Marker für Pflichtangaben, die noch fehlen. Muss vor dem Livegang leer sein. */
.todo {
  display: inline-block; background: #FFE9F3; color: #B00E64;
  border: 1px dashed var(--color-primary); border-radius: 3px;
  padding: 2px 8px; font-size: 14px; font-weight: 600;
}
.legal-hinweis {
  background: var(--color-sage-tint); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius); padding: 18px 22px; margin: 0 0 32px; font-size: 15px;
}

body.legal-page main [id^="easyrecht-"] { font-size: 1rem; line-height: 1.6; }
body.legal-page main [id^="easyrecht-"] h2,
body.legal-page main [id^="easyrecht-"] h3 { margin-top: 32px; margin-bottom: 12px; }
body.legal-page main [id^="easyrecht-"] p,
body.legal-page main [id^="easyrecht-"] ul,
body.legal-page main [id^="easyrecht-"] ol { margin-bottom: 16px; }
body.legal-page main [id^="easyrecht-"] a {
  color: var(--color-primary); text-decoration: underline; word-break: break-word;
}
@media (max-width: 768px) {
  body.legal-page main { padding: 32px 16px 48px; }
}

/* ---------- Utility ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--color-primary);
  color: #fff; padding: 12px 20px; z-index: 2000; text-decoration: none;
}
.skip-link:focus { left: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}