/* === Legal / Datenschutz page harmonizer ===
   Drop this file next to styles.css (e.g., /assets/css/legal.css) and include it
   AFTER styles.css. It reuses your design tokens from :root.
*/

/* Base wrapper */
.legal {
  background: var(--clr-bg, #fff);
  padding: clamp(24px, 4vw, 48px) 0 72px;
}

/* Constrain width to your global container */
.legal .legal__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding: 0 20px;
}

/* Headings: use your brand styles */
.legal h1 {
  margin: 22px 0 16px;
  font-weight: 800;
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1.15;
  color: var(--clr-accent-orange, #C08864);
}

.legal h2 {
  margin: 28px 0 12px;
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.18;
  color: var(--clr-accent, #507A9C);
}

.legal h3 {
  margin: 22px 0 8px;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.2;
  color: #1f2937;
}

.legal h4 {
  margin: 18px 0 6px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #2b2f36;
}

/* Body copy */
.legal p,
.legal li {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--clr-text, #575756);
}

.legal p + p { margin-top: 0.7rem; }

/* Lists */
.legal ul, .legal ol {
  margin: 0.5rem 0 1.25rem 1.25rem;
  padding: 0;
}
.legal li + li { margin-top: 0.25rem; }

/* Links */
.legal a {
  color: var(--clr-accent, #507A9C);
  text-decoration: none;
  border-bottom: 1px solid rgba(80,122,156,.35);
}
.legal a:hover,
.legal a:focus {
  color: #3e6785;
  border-bottom-color: #3e6785;
}

/* Subtle rules between major sections */
.legal hr.section {
  border: 0;
  height: 1px;
  background: rgba(0,0,0,.06);
  margin: 28px 0;
}

/* Definition-like blocks */
.legal .note {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7f9fb;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Make top of page breathe below sticky header */
.site-header + .legal .legal__inner {
  padding-top: clamp(8px, 2.2vw, 20px);
}

/* Small screens: comfortable spacing */
@media (max-width: 640px) {
  .legal {
    padding-bottom: 56px;
  }
  .legal ul, .legal ol { margin-left: 1rem; }
}