/* Standalone Impressum and Datenschutz pages.

   These exist so the two statutory pages have a real URL that works without
   JavaScript. On the site itself the same text opens in a modal; the footer and
   nav links point here and script upgrades them, so the modal is a convenience
   over a working route rather than the only way in.

   Kept as its own small stylesheet rather than sharing index.html's, because the
   page styles live inline in that file and there is nothing to import. The values
   below are copied from it: same fonts, same ink, same measure, same type scale
   as the modals these pages mirror. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #111111;
  --bg: #ffffff;
  --muted: #5e5e5e;
  --line: #e4e4e4;
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.legal {
  width: min(88vw, 42rem);
  margin: 0 auto;
  padding: 4rem 0 6rem;
}

/* the wordmark returns to the site, set in the caps treatment the topbar uses */
.legal-back {
  display: inline-block;
  margin-bottom: 3.5rem;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.legal-back:hover { opacity: 0.6; }

.legal h1 {
  margin: 0 0 2rem;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.legal h2 {
  margin: 2.4rem 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.65;
  color: #2a2a2a;
}

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

/* the mailto sits inside running text, so it gets a real target height without
   breaking the line box */
.legal a[href^="mailto:"] { display: inline-block; min-height: 24px; }

.legal-meta {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}
.legal-meta a { color: var(--muted); text-underline-offset: 3px; }
.legal-meta a:hover { color: var(--ink); }
.legal-meta .sep { margin: 0 0.5rem; color: var(--line); }

@media (max-width: 640px) {
  .legal { padding: 3rem 0 4rem; }
  .legal h1 { font-size: 1.6rem; }
}