/* ==========================================================
   LEGAL PAGES — Impressum and Datenschutzerklärung.

   Deliberately plain. These exist to be read and, if it ever comes to it,
   to be read by someone checking compliance, so they get a single measured
   column and nothing else. Loaded after style.css.
   ========================================================== */

.legal{
  max-width: 62ch;
  margin: 0 auto;
  padding: 150px clamp(20px, 4vw, 56px) clamp(60px, 12vh, 120px);
}

.legal h1{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin-bottom: clamp(24px, 4vh, 40px);
}

.legal h2{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: -.01em;
  margin-top: clamp(30px, 5vh, 48px);
  margin-bottom: 8px;
}

/* the first heading follows the title, so it doesn't need the full gap */
.legal h2:first-of-type{ margin-top: 0; }

.legal h3{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  margin-top: 20px;
  margin-bottom: 6px;
}

.legal p,
.legal li{
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.65;
  color: var(--fg-dim);
}
.legal p + p{ margin-top: 10px; }

.legal ul{
  margin: 8px 0 0;
  padding-left: 18px;
}
.legal li + li{ margin-top: 4px; }

/* the address block: set as data rather than prose, so it reads as the
   record it is. Not an image and not assembled by script — §5 DDG wants
   these details immediately readable. */
.legal address{
  font-style: normal;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.65;
  color: var(--fg);
}

.legal a{
  color: var(--fg);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  padding-bottom: 1px;
  transition: color .3s ease, border-color .3s ease;
}
.legal a:hover{
  color: var(--hl, var(--pink));
  border-color: var(--hl, var(--pink));
}

/* a quiet line between the two legal pages, so each links to the other */
.legal-switch{
  margin-top: clamp(36px, 6vh, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}