/* Shared by imprint.html, impressum.html, privacy.html and datenschutz.html.
   Self contained on purpose: the legal pages do not load the landing page
   stylesheet, because none of the scene, hero or modal rules apply to them. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #1c1c1c;
  --ink: #f4f4f4;
  --ink-dim: #d8d8d8;
  --muted: #9a9a9a;
  --line: rgba(255, 255, 255, 0.12);
  --gutter: clamp(1.25rem, 3.6vw, 4.25rem);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid #bcbcbf;
  outline-offset: 3px;
}

/* The block is centred in the viewport, horizontally and vertically. No fixed
   height and no `1fr` row: the rows size to their content, so a page longer
   than the screen simply scrolls instead of being clipped. The container is
   only as wide as the text needs, which is what puts the block in the middle. */
.legal {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  gap: clamp(1.25rem, 3vh, 2.25rem);
  width: min(100%, 46rem);
  margin-inline: auto;
  padding: clamp(1.25rem, 3.5vh, 2.5rem) var(--gutter);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  position: relative;
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.22s ease;
}

.legal-back:hover { color: var(--ink); }

/* Invisible tap area, WCAG 2.2 SC 2.5.8 wants 24 by 24 px. */
.legal-back::after {
  content: "";
  position: absolute;
  inset: -12px -8px;
}

.legal-back svg { transition: transform 0.22s ease; }
.legal-back:hover svg { transform: translateX(-3px); }

.legal h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.legal-date {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
}

/* One column at every width. The measure is set on the section rather than the
   grid, so the text keeps a readable line length while the column itself can
   be as wide as the page. */
.legal-grid {
  display: grid;
  align-content: start;
  gap: clamp(1rem, 2.2vh, 1.6rem);
}

.legal-grid section { max-width: 64ch; }

.legal-grid h2 {
  margin-bottom: 0.4rem;
  color: var(--ink-dim);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.legal-grid p {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.65;
}

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

.legal-grid a {
  color: var(--ink-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--line);
  transition: text-decoration-color 0.22s ease;
}

.legal-grid a:hover { text-decoration-color: currentColor; }

@media (max-width: 760px) {
  /* One column needs the full text height, so everything tightens up to keep
     the longest page, the privacy notice, inside a 390 by 844 phone screen. */
  .legal {
    gap: 0.9rem;
    padding-block: 1.1rem;
  }

  .legal h1 { font-size: 1.5rem; }
  .legal-date { margin-top: 0.35rem; }

  .legal-grid { gap: 0.9rem; }
  .legal-grid section { max-width: none; }
  .legal-grid h2 { margin-bottom: 0.3rem; }
  .legal-grid p { line-height: 1.55; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}