/* The app's imprint, privacy and support pages. Every colour and all type is a design token's (design/shmedien.tokens.json,
   harness2#692), read from the stylesheet the website's build writes beside its assets (apps/web/scripts/tokens.ts);
   the roles are those of the website's own imprint (apps/web/app/routes/impressum.tsx). A link is the text colour,
   underlined, as on the website and in the app. The typefaces come with the tokens: the reader writes the website's
   @font-face rules into the same stylesheet. */
@import "../assets/tokens.css";
:root {
  --breakpoint-sm: 40rem;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-copy-body);
  overflow-wrap: break-word;
}
header, main { max-width: 40rem; margin: 0 auto; padding: 0 16px; }
header { border-top: 6px solid var(--primary); padding-top: 16px; padding-bottom: 16px; font-weight: var(--font-weight-bold); }
main { padding-bottom: 48px; }
h1, h2 { font-family: var(--font-heading); font-weight: var(--font-weight-bold); }
h1 { font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); margin: 8px 0 24px; }
h2 { font-size: var(--text-headline); line-height: var(--leading-headline); margin: 32px 0 8px; }
p, ul { margin: 0 0 16px; }
ul { padding-left: 24px; }
li + li { margin-top: 8px; }
a { color: var(--foreground); }
a:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.note { color: var(--muted-foreground); }
@media (width >= 40rem) {
  header, main { padding-left: 32px; padding-right: 32px; }
  h1 { font-size: var(--text-heading-wide); line-height: var(--leading-heading-wide); }
}