/* ------------------------------------------------------------
   Imprint + privacy policy (see legal.js)
   Footer links below the frame and the pop-up window, which
   takes the place of the page content.
   ------------------------------------------------------------ */

/* ---------- Footer links ---------- */

.legal-links {
  position: fixed;
  right: var(--margin);
  top: calc(100svh - var(--margin) + 15 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: max(11px, calc(12.5 * var(--u)));
  line-height: 1;
}

/* Only fades in when the bar draws in (from the start page) */
.from-start .legal-links {
  animation: appear 0.7s ease 1.4s backwards;
}

.legal-links__line {
  width: calc(38 * var(--u));
  height: var(--stroke);
  background: var(--ink);
}

.legal-link {
  --bold-stretch: 89.5%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  /* Hover: eases into bold, the width axis keeps the text size */
  transition: font-weight 0.4s ease, font-stretch 0.4s ease;
}

.legal-link[data-doc="privacy"] { --bold-stretch: 90.5%; }
:lang(de) .legal-link[data-doc="imprint"] { --bold-stretch: 92%; }
:lang(de) .legal-link[data-doc="privacy"] { --bold-stretch: 91%; }

.legal-link:hover,
.legal-link:focus-visible {
  font-weight: 700;
  font-stretch: var(--bold-stretch);
}

/* ---------- Pop-up window ----------
   Same place and size as the landing page composition */

.legal {
  position: fixed;
  inset: calc(var(--margin) + var(--bar-height)) var(--margin) var(--margin);
  width: calc(1668 * var(--u));
  height: calc(708 * var(--u));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  box-shadow: inset 0 0 0 var(--stroke) var(--ink); /* not border: browsers round thin borders down */
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}

.legal[open] {
  animation: appear 0.35s ease;
}

.legal::backdrop {
  background: transparent;
}

/* The page content makes room for the window */
.legal-open .content {
  visibility: hidden;
}

.legal__close {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(83 * var(--tu));
  height: calc(83 * var(--tu));
  padding: 0;
  border: 0;
  box-shadow: inset 0 0 0 var(--stroke) var(--ink);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}

/* Contour hover: the outline thickens, the cross gets bolder */
.legal__close svg {
  width: calc(35 * var(--tu));
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  stroke-linejoin: miter;
  transition: stroke-width 0.35s ease;
}

.legal__close:hover svg,
.legal__close:focus-visible svg {
  stroke-width: 7px;
}

/* Scrolls when the text is longer than the window; inset by the
   line width so scrolled text never covers the outline */
.legal__body {
  height: calc(100% - 2 * var(--stroke));
  margin: var(--stroke);
  padding: calc(80 * var(--tu)) calc(83 * var(--tu)) calc(60 * var(--tu)) calc(83 * var(--tu));
  overflow-y: auto;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
  font-size: var(--small-text);
  line-height: 1.2;
  text-transform: lowercase;
}

.legal__body h2 {
  margin: 0 0 calc(22 * var(--tu));
  font-size: calc(31 * var(--tu));
  font-weight: 400;
  line-height: 1.1;
}

.legal__body h3 {
  margin: 0;
  font-size: inherit;
  font-weight: 700;
}

.legal__body p,
.legal__body ul {
  margin: 0 0 1.2em;
}

.legal__body ul {
  padding: 0;
  list-style: none;
}

.legal__body em {
  font-style: normal;
}

.legal__body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--stroke);
  text-underline-offset: 0.18em;
}

.legal__close:focus-visible,
.legal-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .legal-links,
  .legal[open],
  .legal-link,
  .legal__close svg {
    animation: none;
    transition: none;
  }
}