/* ====================== LEGAL PAGES ======================
   Shared layout + typographic styles for agb.html,
   datenschutz.html, impressum.html.

   Row 1 — header: col-10 heading | col-10 intro lead
   Row 2 — centered block: grid-column 5/span 12 (4 units each side) */

.legal__layout {
  align-items: start;
  row-gap: var(--gap-64);
}

/* ── Row 1: Header ── */
.legal__heading { display: flex; flex-direction: column; gap: var(--gap-16); }

.legal__lead {
  color: var(--color-text-inverse-secondary);
  font-size: var(--fs-sm);
  line-height: 1.65;
  padding-top: 8px; /* optical baseline alignment with H1 first line */
}

/* ── Row 2: Centered prose block ── */
.legal__prose-wrap {
  grid-column: 5 / span 12;
  display: flex;
  flex-direction: column;
  gap: var(--gap-24);
}

.legal__date {
  display: inline-block;
  align-self: flex-end;
  background: var(--charcoal-100);
  border-radius: var(--rd-6);
  color: var(--color-text-inverse-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 7px 12px;
  white-space: nowrap;
}

/* ── Prose typographic system ── */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--gap-48);
}

/* § section blocks — spacing only, no strokes */
.prose section { /* intentionally empty — gap handles spacing */ }

/* § headings */
.prose h2 {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-inverse-primary);
  margin-bottom: var(--gap-16);
  line-height: 1.4;
}

/* Body paragraphs */
.prose p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--color-text-inverse-secondary);
  margin-bottom: var(--gap-12);
}

.prose p:last-child { margin-bottom: 0; }

/* Links inside prose */
.prose a {
  color: var(--text-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover,
.prose a:focus-visible {
  text-decoration-thickness: 2px;
}

/* Inline icon link (e.g. a download link inside prose text/list items) */
.legal__icon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-8);
}

/* Sub-lists */
.prose ul {
  list-style: none;
  padding-left: 1.2em;
  margin-bottom: var(--gap-12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prose ul li {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-inverse-secondary);
  position: relative;
}

.prose ul li::before {
  content: "–";
  position: absolute;
  left: -1.2em;
  color: var(--charcoal-200);
}

/* ── Impressum: subtitle under H1 ── */
.legal__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--color-text-inverse-secondary);
}

/* ── Impressum: 3-column company info block ── */
.legal__info {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-32);
  padding: var(--gap-32) 0;
  border-top: var(--bd-1) solid var(--charcoal-100);
  border-bottom: var(--bd-1) solid var(--charcoal-100);
}

.legal__info-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal__info-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-inverse-secondary);
}

.legal__info-value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-text-inverse-primary);
}

/* ── Impressum prose variant: larger headings + 16px body ── */
.prose--impressum h2 {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-xl);
  letter-spacing: var(--ls-xl);
  color: var(--color-text-inverse-primary);
  margin-bottom: var(--gap-16);
}

.prose--impressum p {
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  color: var(--color-text-inverse-secondary);
  margin-bottom: var(--gap-16);
}

.prose--impressum p:last-child { margin-bottom: 0; }

/* ── Responsive ── */
@media (max-width: 1023px) {
  .legal__layout { row-gap: var(--gap-48); }

  .legal__heading,
  .legal__lead { grid-column: 1 / -1; }
  .legal__lead { padding-top: 0; }

  .legal__prose-wrap { grid-column: 1 / -1; }

  .legal__info { grid-template-columns: 1fr; gap: var(--gap-24); }
}