/* =============================================================
   Fiestalimo · Rechtstext-Seiten (Impressum / Datenschutz)
   Nutzt die Design-Tokens aus main.css (:root).
   ============================================================= */

.legal-page {
  --header-height: 76px;
  background:
    radial-gradient(1000px 460px at 50% -10%, rgba(196, 138, 54, 0.12), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
}

.legal {
  padding-top: var(--header-height);
}

/* ---------- Kopf ---------- */
.legal__hero {
  text-align: center;
  padding: clamp(16px, 2.4vw, 30px) clamp(16px, 4vw, 40px) clamp(14px, 2.2vw, 24px);
}

.legal__hero .kicker {
  justify-content: center;
  margin-bottom: 12px;
}

.legal__hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
}

.legal__hero p {
  margin: 12px auto 0;
  max-width: 540px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Inhalt ---------- */
.legal__wrap {
  width: min(880px, calc(100vw - 36px));
  margin: 0 auto clamp(60px, 8vw, 110px);
  padding: clamp(26px, 4vw, 56px) clamp(22px, 4vw, 60px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}

.legal__prose {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
}

.legal__prose h2 {
  margin: 2.2em 0 0.6em;
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
}

.legal__prose h2:first-child {
  margin-top: 0;
}

.legal__prose h3 {
  margin: 1.6em 0 0.4em;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.legal__prose p {
  margin: 0 0 1em;
}

.legal__prose a {
  color: var(--gold-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal__prose a:hover {
  color: var(--gold);
}

.legal__prose ul {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

.legal__prose li {
  margin: 0.25em 0;
}

.legal__prose strong {
  color: var(--ink);
}

/* Hervorgehobener Kontakt-/Verantwortlich-Block */
.legal__card {
  margin: 0 0 1.4em;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(196, 138, 54, 0.05), rgba(196, 138, 54, 0.02));
}

.legal__card p {
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
}

.legal__updated {
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

/* Table of contents (Datenschutz) */
.legal__toc {
  margin: 0 0 1.6em;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
}

.legal__toc strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal__toc ol {
  margin: 0;
  padding-left: 1.2em;
  columns: 2;
  gap: 24px;
}

.legal__toc a {
  color: var(--ink-soft);
  text-decoration: none;
}

.legal__toc a:hover {
  color: var(--gold-dark);
}

@media (max-width: 560px) {
  .legal__toc ol { columns: 1; }
}