/* ==========================================================================
   Legal pages: Impressum, Datenschutz, AGB and their English versions.

   Until 2026-09-28 each of these carried its own inline stylesheet on a white
   ground with a green band and a "back" link, and none of them had the site's
   header or footer. Lukas's check of that day asked for both, on the dark
   ground. The header and footer come from site.css and header-hero.css
   unchanged; this file only sets the reading column between them.
   ========================================================================== */

/* The header is fixed and has no hero under it here, so it takes its solid
   ground from the start rather than only once scrolled. */
.legal header,
.legal header.is-stuck {
  background: rgba(8, 20, 15, 0.93);
  border-bottom-color: color-mix(in srgb, var(--gold) 18%, transparent);
}

.legal-main {
  padding: 168px 0 var(--section-y);
}

.legal-col {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.legal-col .kicker { margin-bottom: 14px; }

.legal-col h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 40px;
}

.legal-col h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--text);
  margin: 40px 0 12px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.legal-col h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-col h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-soft);
  margin: 24px 0 8px;
}

.legal-col p,
.legal-col li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
}

.legal-col p { margin: 0 0 14px; }
.legal-col ul,
.legal-col ol { margin: 8px 0 14px 22px; padding: 0; }
.legal-col li { margin-bottom: 6px; }
.legal-col strong { color: var(--text); font-weight: 600; }

.legal-col a { color: var(--gold); text-underline-offset: 3px; }
.legal-col a:hover { color: var(--gold-hover); }

.legal-col .legal-stand {
  margin-top: 40px;
  font-size: 14px;
  color: var(--text-dim);
}

@media (max-width: 767px) {
  .legal-main { padding-top: 120px; }
}