/* =========================================================
   RECHTLICHE SEITEN (Phase L5 · 2026-10-10) – Impressum (45), Datenschutz (47), AGB (70)
   Markup: inc/legal/render.php. Präfix .mr-lg-. Baut auf global.css (Tokens) und layout.css auf.
   Lesbarkeit zuerst: ruhiger Hero, Inhaltsverzeichnis, begrenzte Zeilenlänge, klare H2/H3,
   scrollbare Tabellen. Keine Animationen, keine Pfeile, Unterstreichung nur bei Inline-Links.
========================================================= */

.mr-lg {
  --lg-gutter: 20px;
  --lg-max: 1180px;
  --lg-line: rgba(255, 255, 255, .1);
  --lg-text: #cfd8ea;
  --lg-muted: #93a0b9;
  --lg-blue: #8fb6ff;
  /* Phase L5.2: Sticky-Versatz unter dem Floating Header (18 px Oberkante + 16 px Innenabstand + 2 px Rahmen
     + Header-Inhalt --mr-hnav-inner-h + 24 px Luft) und Abstand Hero → Inhalt (Skala wie --hv2-head-gap,
     mindestens 48 px wie --mr-section-space-sm). */
  --lg-head: calc(var(--mr-hnav-inner-h, 64px) + 60px);
  --lg-hero-gap: clamp(48px, 4vw, 64px);
  font-family: "Inter", var(--mr-font-body, Arial, sans-serif);
  background: var(--mr-bg, #070b16);
  color: var(--lg-text);
}
@media (min-width: 768px) { .mr-lg { --lg-gutter: 28px; } }
@media (max-width: 1023px) { .mr-lg { --lg-hero-gap: 40px; } }
@media (max-width: 767px) { .mr-lg { --lg-hero-gap: 28px; } }
body.admin-bar .mr-lg { --lg-head: calc(var(--mr-hnav-inner-h, 64px) + 92px); }
@media (min-width: 1200px) { .mr-lg { --lg-gutter: 40px; } }

body.mr-lg-page { overflow-x: clip; }

.mr-lg *,
.mr-lg *::before,
.mr-lg *::after { box-sizing: border-box; }
.mr-lg :is(h1, h2, h3, p, ul, ol, dl, dd, address, table) { margin: 0; }
.mr-lg :is(h1, h2, h3) { font-family: "Inter", var(--mr-font-body, Arial, sans-serif); color: #fff; text-transform: none; }
.mr-lg a { color: var(--lg-blue); text-decoration: none; }
.mr-lg a:hover { color: #fff; }
.mr-lg a:focus-visible,
.mr-lg button:focus-visible,
.mr-lg summary:focus-visible,
.mr-lg .mr-lg-table:focus-visible { outline: 2px solid var(--lg-blue); outline-offset: 3px; border-radius: 6px; }
.mr-lg a.text-link-inline { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(143, 182, 255, .45); text-underline-offset: 3px; }
.mr-lg a.text-link-inline:hover { text-decoration-color: currentColor; }
.mr-lg code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; padding: .1em .35em; border-radius: 5px; background: rgba(255, 255, 255, .07); color: #e4ebf8; overflow-wrap: anywhere; }

.mr-lg-wrap { width: min(calc(100% - var(--lg-gutter) * 2), var(--lg-max)); margin-inline: auto; }

/* ---------- Hero ---------- */
.mr-lg-hero {
  position: relative;
  padding-top: clamp(112px, 8.6vw, 140px);
  padding-bottom: clamp(36px, 4vw, 56px);
  background: var(--mr-gradient-dark, #070b16);
  border-bottom: 1px solid var(--lg-line);
}
@media (max-width: 767px) { .mr-lg-hero { padding-top: 32px; padding-bottom: 32px; } }
.mr-lg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px !important;
  color: #9fc2ff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.mr-lg-eyebrow::before { content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: var(--mr-gradient-primary, #8fb6ff); }
.mr-lg-h1 { max-width: 18em; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; overflow-wrap: break-word; hyphens: auto; }
.mr-lg-lead { max-width: 42rem; margin-top: 16px !important; font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); line-height: 1.6; color: var(--lg-text); }
.mr-lg .mr-lg-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.mr-lg-meta li { padding: 5px 12px; border: 1px solid var(--lg-line); border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--lg-muted); font-size: .86rem; line-height: 1.4; }

/* ---------- Layout ---------- */
.mr-lg-layout { display: grid; gap: 28px; padding-block: var(--lg-hero-gap) clamp(56px, 6vw, 96px); }
.mr-lg-body { min-width: 0; }
@media (min-width: 1024px) {
  .mr-lg-layout { grid-template-columns: 260px minmax(0, 1fr); column-gap: clamp(40px, 4.5vw, 72px); align-items: start; }
}

/* ---------- Inhaltsverzeichnis ---------- */
.mr-lg-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.mr-lg-toc__list a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--lg-text); font-size: .92rem; line-height: 1.35; }
.mr-lg-toc__list a:hover { background: rgba(143, 182, 255, .08); color: #fff; }

.mr-lg-toc--desktop { display: none; }
@media (min-width: 1024px) {
  .mr-lg-toc--desktop {
    display: block;
    position: sticky;
    top: var(--lg-head);
    max-height: calc(100vh - var(--lg-head) - 24px);
    overflow-y: auto;
    padding: 18px 10px 18px 8px;
    border: 1px solid var(--lg-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .025);
    scrollbar-width: thin;
  }
  .mr-lg-toc__title { margin: 0 0 8px 10px !important; color: var(--lg-muted); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .mr-lg-toc--mobile { display: none; }
}

.mr-lg-toc--mobile { margin-bottom: 28px; border: 1px solid var(--lg-line); border-radius: 16px; background: rgba(255, 255, 255, .03); }
@media (max-width: 767px) { .mr-lg-toc--mobile { margin-bottom: 24px; } }
.mr-lg-toc--mobile summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 18px;
  color: #fff;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.mr-lg-toc--mobile summary::-webkit-details-marker { display: none; }
.mr-lg-toc--mobile summary::after { content: "+"; flex: none; color: var(--lg-blue); font-size: 1.3rem; line-height: 1; }
.mr-lg-toc--mobile details[open] summary::after { content: "–"; }
.mr-lg-toc__count { margin-left: auto; color: var(--lg-muted); font-size: .85rem; font-weight: 500; }
.mr-lg-toc--mobile .mr-lg-toc__list { padding: 0 8px 12px; }
.mr-lg-toc--mobile .mr-lg-toc__list a { padding: 10px; }

/* ---------- Artikel ---------- */
.mr-lg-article { max-width: 41rem; }
.mr-lg-section { padding-top: 8px; scroll-margin-top: calc(var(--lg-head) + 8px); }
@media (max-width: 1023px) { .mr-lg-section { scroll-margin-top: 80px; } }
.mr-lg-section + .mr-lg-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--lg-line); }
.mr-lg-h2 { margin-bottom: 16px !important; font-size: clamp(1.3rem, 1.15rem + .55vw, 1.6rem); font-weight: 700; line-height: 1.22; letter-spacing: -.016em; overflow-wrap: break-word; hyphens: auto; }
.mr-lg-h3 { margin: 26px 0 10px !important; font-size: 1.08rem; font-weight: 650; line-height: 1.3; }
.mr-lg-article p,
.mr-lg-article li,
.mr-lg-article address,
.mr-lg-article dd { font-size: 1.0125rem; line-height: 1.72; overflow-wrap: break-word; hyphens: auto; }
.mr-lg-article p + p,
.mr-lg-article p + .mr-lg-list,
.mr-lg-article .mr-lg-list + p,
.mr-lg-article address + p,
.mr-lg-article address + .mr-lg-dl,
.mr-lg-article .mr-lg-dl + p,
.mr-lg-article p + address,
.mr-lg-article .mr-lg-table + p,
.mr-lg-article p + .mr-lg-table,
.mr-lg-article .mr-lg-box + p,
.mr-lg-article p + .mr-lg-box { margin-top: 14px; }
.mr-lg-article strong { color: #fff; font-weight: 650; }
.mr-lg-address { font-style: normal; }

.mr-lg-list { margin: 0; padding: 0; list-style: none; }
.mr-lg-list li { position: relative; padding-left: 22px; }
.mr-lg-list li + li { margin-top: 6px; }
.mr-lg-list li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--lg-blue); opacity: .8; }

.mr-lg-clause { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 10px; }
.mr-lg-clause + .mr-lg-clause { margin-top: 10px !important; }
.mr-lg-num { color: var(--lg-muted); font-variant-numeric: tabular-nums; font-size: .92rem; padding-top: .12em; }
.mr-lg-clause + .mr-lg-list,
.mr-lg-list + .mr-lg-clause { margin-top: 10px !important; }
.mr-lg-clause + .mr-lg-list { margin-left: calc(3.4rem + 10px); }
@media (max-width: 479px) {
  .mr-lg-clause { grid-template-columns: 2.9rem minmax(0, 1fr); column-gap: 8px; }
  .mr-lg-clause + .mr-lg-list { margin-left: calc(2.9rem + 8px); }
}

.mr-lg-dl { display: grid; gap: 6px; margin: 0; }
.mr-lg-dl div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; }
.mr-lg-dl dt { color: var(--lg-muted); font-size: .95rem; line-height: 1.72; }

.mr-lg-box { padding: 18px 20px; border: 1px solid rgba(143, 182, 255, .28); border-radius: 14px; background: rgba(143, 182, 255, .06); }
.mr-lg-box .mr-lg-h3 { margin-top: 0 !important; }

/* Tabellen: eigener horizontaler Scrollbereich, nie die Seite verbreitern */
.mr-lg-table { max-width: 100%; overflow-x: auto; border: 1px solid var(--lg-line); border-radius: 14px; -webkit-overflow-scrolling: touch; }
.mr-lg-table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .93rem; line-height: 1.5; }
.mr-lg-table th,
.mr-lg-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lg-line); }
.mr-lg-table thead th { background: rgba(255, 255, 255, .05); color: #fff; font-weight: 650; white-space: nowrap; }
.mr-lg-table tbody tr:last-child td { border-bottom: 0; }
.mr-lg-table td:first-child { color: #fff; }
.mr-lg-table code { white-space: nowrap; overflow-wrap: normal; }

.mr-lg-inline-btn {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lg-blue);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(143, 182, 255, .45);
  text-underline-offset: 3px;
  cursor: pointer;
}
.mr-lg-inline-btn:hover { color: #fff; text-decoration-color: currentColor; }

.mr-lg-totop { margin-top: 18px !important; font-size: .9rem !important; }
.mr-lg-totop a { color: var(--lg-muted); }
.mr-lg-totop a:hover { color: #fff; }
@media (min-width: 1024px) { .mr-lg-totop { display: none; } }

/* ---------- Weitere Rechtsseiten ---------- */
.mr-lg-related { max-width: 41rem; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--lg-line); }
.mr-lg-related__title { margin-bottom: 14px !important; color: var(--lg-muted) !important; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mr-lg-related__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mr-lg-related__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--lg-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: #fff !important;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}
.mr-lg-related__link:hover { border-color: rgba(143, 182, 255, .45); background: rgba(143, 182, 255, .08); }

@media print {
  .mr-lg-toc, .mr-lg-related, .mr-lg-totop { display: none !important; }
  .mr-lg, .mr-lg-hero { background: #fff !important; color: #000 !important; }
  .mr-lg :is(h1, h2, h3, strong, td, th) { color: #000 !important; }
}

/* Sprungmarken ohne Scroll-Animation (global.css setzt scroll-behavior: smooth) */
html:has(body.mr-lg-page) { scroll-behavior: auto; }

/* Ruhige Rechtsseiten: schwebendes Bewertungs-Widget (convi Google Bewertungen) hier ausblenden */
body.mr-lg-page .cmgr-widget,
body.mr-lg-page .cmgr-mini { display: none !important; }

/* Phase P1: Inhaltsverzeichnis mit mehr Luft zum schwebenden Header (Desktop +48 px beim Sticky-Halt,
   +16 px Start unter dem Hero). Sprungziele behalten denselben Abstand, damit Überschriften nicht
   unter dem Header verschwinden. Tablet/Mobil: kein Sticky, dort gilt der Hero-Abstand. */
@media (min-width: 1024px) {
  .mr-lg { --lg-toc-top: calc(var(--lg-head) + 48px); }
  .mr-lg-layout { padding-top: calc(var(--lg-hero-gap) + 16px); }
  .mr-lg-toc--desktop {
    top: var(--lg-toc-top);
    max-height: calc(100vh - var(--lg-toc-top) - 24px);
  }
  .mr-lg-section { scroll-margin-top: calc(var(--lg-toc-top) + 8px); }
}