/* ============================================================
   Legal pages — Impressum, Datenschutz
   Prose layout dropped onto the same cosmic shell as index.html.
   Kept in its own file so it never collides with styles.css.
   Loaded AFTER styles.css, and only by the legal pages.
   ============================================================ */

/* Clears the fixed 82px nav, then gives the text room to breathe. */
.legal { position: relative; padding: 150px 0 90px; }
.legal__inner { max-width: 760px; margin: 0 auto; }

.legal__title { font-size: clamp(2rem, 4vw, 3rem); }
.legal__lede { color: var(--muted); margin-top: 18px; font-size: 1.05rem; }
.legal__updated {
  color: var(--muted-dim); font-size: 0.85rem; margin-top: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
}

/* The base reset zeroes p margins and strips link underlines — prose needs
   both back, but only inside .legal so the rest of the site is untouched. */
.legal h2 {
  font-size: 1.35rem; margin: 46px 0 14px;
  padding-top: 26px; border-top: 1px solid var(--border);
}
.legal h3 { font-size: 1.02rem; margin: 26px 0 8px; color: var(--text); }
.legal p { color: var(--muted); margin: 0 0 14px; }
.legal ul { color: var(--muted); margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a:not(.btn) {
  color: var(--cyan); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .2s;
}
.legal a:not(.btn):hover { color: var(--cyan-bright); }
.legal strong { color: var(--text); font-weight: 600; }

/* Impressum key/value block — a glass card holding a definition list. */
.legal__card {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 30px;
  box-shadow: var(--shadow-card);
}
.legal__dl { display: grid; grid-template-columns: 210px 1fr; gap: 14px 24px; margin: 0; }
.legal__dl dt {
  color: var(--muted-dim); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.1em; padding-top: 3px;
}
.legal__dl dd { color: var(--text); margin: 0; }

@media (max-width: 640px) {
  .legal { padding-top: 120px; }
  .legal__dl { grid-template-columns: 1fr; gap: 4px; }
  .legal__dl dd { margin-bottom: 14px; }
  .legal__card { padding: 22px 20px; }
}