/* ---- legal.css: Impressum & Datenschutzbestimmungen -----------------------
   Seitenkopf (Weinrot-Band) plus Lesetext auf weissem Grund. Farben und
   Schriften kommen aus global.css. */
.legal-hero {
  background: radial-gradient(ellipse at 30% 20%, var(--wine-600) 0%, var(--wine-900) 70%);
  color: var(--cream);
  padding: clamp(56px, 9vw, 96px) 0 clamp(40px, 6vw, 64px);
}

.legal-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

.legal-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.12;
  font-weight: 800;
  margin: 0 0 16px;
  color: inherit;
}

.legal-hero p {
  margin: 0;
  line-height: 1.65;
  max-width: 620px;
}

.legal-text {
  background: var(--paper);
  color: var(--text-dark);
}

.legal-text-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.legal-text h2 {
  font-size: 1.35rem;
  color: var(--wine-900);
  margin: 36px 0 10px;
}

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

.legal-text p,
.legal-text li {
  line-height: 1.7;
  font-size: var(--fs-base);
}

.legal-text p {
  margin: 0 0 14px;
}

.legal-text ul {
  padding-left: 20px;
  margin: 0 0 14px;
}

.legal-text li {
  margin-bottom: 4px;
}

/* global.css setzt a { text-decoration: none } - im Fliesstext sollen Links
   erkennbar bleiben (z.B. der Cookie-Widerruf). */
.legal-text a {
  color: var(--wine-600);
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  .legal-text a:hover {
    color: var(--red);
  }
}

.legal-text .legal-updated {
  margin-top: 36px;
  font-size: var(--fs-sm);
  color: var(--muted);
}