/* ─────────────────────────────────────────────────────────────────────────────
 * Rechtsdokumente im BookIvy-Marketing-Design (/ivy/recht/…)
 * Aus recht/avv/index.php herausgezogen, damit Impressum, Datenschutz und AVV
 * dasselbe Erscheinungsbild teilen. Setzt colors_and_type.css + site.css voraus.
 * ───────────────────────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.lgl-hero {
  background: var(--rt-bg-inverse);
  color: var(--rt-fg-on-dark);
  padding-block: 56px 46px;
}
.lgl-hero__eyebrow {
  display: inline-block; font-family: var(--rt-font-body); font-weight: var(--rt-w-semibold);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rt-warm-200); margin-bottom: 14px;
}
.lgl-hero__title {
  font-family: var(--rt-font-display); font-weight: var(--rt-w-bold);
  font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--rt-fg-on-dark); margin: 0 0 12px; max-width: 760px;
}
.lgl-hero__sub { font-size: 16px; color: var(--rt-fg-on-dark-muted); margin: 0; }
.lgl-hero__meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.lgl-badge {
  display: inline-block; font-size: 12px; font-weight: var(--rt-w-semibold);
  letter-spacing: 0.02em; color: var(--rt-fg-on-dark);
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px; padding: 5px 13px;
}

/* ── Dokument-Container ───────────────────────────────────────────────────── */
.lgl-wrap { background: var(--rt-bg); padding-block: 40px 88px; }
.lgl-doc {
  max-width: 780px; margin: 0 auto;
  background: var(--rt-bg-elevated); border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg); box-shadow: var(--rt-shadow-lg);
  padding: clamp(24px, 4vw, 52px);
}

/* ── Hervorgehobene Blöcke (Parteien, Anbieter-Angaben) ───────────────────── */
.lgl-parties { display: grid; gap: 14px; margin: 0 0 8px; }
.lgl-party {
  border-left: 3px solid var(--rt-accent); background: var(--rt-bg);
  border-radius: 0 8px 8px 0; padding: 12px 16px;
}
.lgl-party__role {
  display: block; font-size: 12px; font-weight: var(--rt-w-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--rt-accent); margin-bottom: 3px;
}
.lgl-party__body { font-size: 15px; line-height: 1.6; color: var(--rt-fg); }

/* ── Überschriften mit Nummernkreis ───────────────────────────────────────── */
.lgl-doc h2 {
  font-family: var(--rt-font-display); font-weight: var(--rt-w-bold);
  font-size: 21px; line-height: 1.25; color: var(--rt-fg);
  margin: 34px 0 10px; padding-top: 22px; border-top: 1px solid var(--rt-border);
  display: flex; gap: 12px; align-items: baseline;
}
.lgl-doc h2:first-of-type { border-top: 0; padding-top: 0; }
.lgl-doc h2 .lgl-n {
  flex: 0 0 auto; font-family: var(--rt-font-body); font-weight: var(--rt-w-bold);
  font-size: 14px; color: var(--rt-accent-fg); background: var(--rt-accent);
  width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(-2px);
}
/* Überschrift-Text als EIN Flex-Item.
   Nötig, sobald die Überschrift Inline-Markup enthält (z. B. das BookIvy-Logo):
   ohne Wrapper wird jeder Textknoten zu einem eigenen Flex-Item und bekommt die
   12 px gap ab — vor dem Logo als doppelter Abstand, dahinter als Lücke, obwohl
   der Text direkt anschließen soll („BookIvy-Instanz"). Innerhalb des Wrappers
   gilt wieder normaler Textfluss. */
.lgl-doc h2 > .lgl-h { flex: 1 1 auto; }
.lgl-doc h3 {
  font-family: var(--rt-font-body); font-weight: var(--rt-w-semibold);
  font-size: 16px; color: var(--rt-fg); margin: 22px 0 8px;
}

/* ── Fließtext + Listen ───────────────────────────────────────────────────── */
.lgl-doc p { font-size: 15px; line-height: 1.72; color: var(--rt-fg-muted); margin: 0 0 12px; }
.lgl-doc ul { margin: 0 0 12px; padding-left: 0; list-style: none; }
.lgl-doc ul li {
  position: relative; font-size: 15px; line-height: 1.66; color: var(--rt-fg-muted);
  padding-left: 22px; margin-bottom: 8px;
}
.lgl-doc ul li::before {
  content: ""; position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px; border-radius: 999px; background: var(--rt-accent);
}
.lgl-doc ul li strong { color: var(--rt-fg); font-weight: var(--rt-w-semibold); }
.lgl-doc a { color: var(--rt-accent); text-decoration: none; }
.lgl-doc a:hover { text-decoration: underline; }

/* ── Definitionsliste (Anbieter-Angaben, Kontakt) ─────────────────────────── */
.lgl-dl { display: grid; grid-template-columns: 190px 1fr; gap: 6px 20px; margin: 0 0 14px; }
.lgl-dl dt {
  font-size: 13px; font-weight: var(--rt-w-semibold); color: var(--rt-fg-subtle);
  letter-spacing: 0.01em; padding-top: 2px;
}
.lgl-dl dd { margin: 0; font-size: 15px; line-height: 1.62; color: var(--rt-fg); }
@media (max-width: 620px) {
  .lgl-dl { grid-template-columns: 1fr; gap: 2px; }
  .lgl-dl dt { margin-top: 10px; }
}

/* ── Tabelle (Empfänger / Auftragsverarbeiter, Speicherdauer) ─────────────── */
.lgl-tablewrap { overflow-x: auto; margin: 0 0 14px; }
.lgl-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.lgl-table th, .lgl-table td {
  text-align: left; vertical-align: top; padding: 10px 12px;
  border-bottom: 1px solid var(--rt-border); line-height: 1.55;
}
.lgl-table th {
  font-weight: var(--rt-w-semibold); color: var(--rt-fg);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom-width: 2px;
}
.lgl-table td { color: var(--rt-fg-muted); }
.lgl-table td strong { color: var(--rt-fg); font-weight: var(--rt-w-semibold); }
.lgl-table tr:last-child td { border-bottom: 0; }

/* ── Hinweis-Kasten ───────────────────────────────────────────────────────── */
.lgl-note {
  background: var(--rt-bg); border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-md, 10px); padding: 14px 18px; margin: 0 0 16px;
}
.lgl-note p:last-child { margin-bottom: 0; }
.lgl-note__label {
  display: block; font-size: 12px; font-weight: var(--rt-w-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--rt-accent); margin-bottom: 6px;
}

/* ── Fußzeile unter dem Dokument ──────────────────────────────────────────── */
.lgl-foot-info {
  max-width: 780px; margin: 26px auto 0; padding: 0 6px;
  font-size: 13px; line-height: 1.7; color: var(--rt-fg-subtle); text-align: center;
}
.lgl-foot-info a { color: var(--rt-accent); text-decoration: none; }
.lgl-foot-info a:hover { text-decoration: underline; }