:root {
  --violett: #7C5CBF;
  --violett-dunkel: #5E4399;
  --violett-tint: #EDE7F8;
  --ink: #2B2340;
  --ink-leise: #5B5470;
  --papier: #FFFFFF;
  --rot: #E8543F;
  --blau: #2E7DD1;
  --gruen: #2FA36B;
}
@media (prefers-color-scheme: dark) {
  :root {
    --violett: #A98BE6;
    --violett-dunkel: #C9B6F2;
    --violett-tint: #2A2340;
    --ink: #EEEAF7;
    --ink-leise: #B9B2CC;
    --papier: #17131F;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--ink);
  font: 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 680px; margin: 0 auto; padding: 32px 16px 64px; }
header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
header img { width: 72px; height: 72px; border-radius: 16px; }
header a { color: inherit; text-decoration: none; }
h1 { font-size: 34px; line-height: 1.2; margin: 0; color: var(--violett); }
h2 { font-size: 22px; margin: 32px 0 8px; }
p, li { max-width: 62ch; }
a { color: var(--violett-dunkel); }
.leise { color: var(--ink-leise); }
.streifen { display: flex; gap: 8px; margin: 8px 0 0; }
.streifen span { width: 40px; height: 8px; border-radius: 4px; }
nav { margin-top: 48px; padding-top: 16px; border-top: 2px solid var(--violett-tint); display: flex; flex-wrap: wrap; gap: 8px 24px; }
.sprache { align-self: flex-start; margin: 0 0 0 auto; padding: 0; border: 0; gap: 4px; font-size: 16px; font-weight: 600; }
.sprache span, .sprache a { padding: 4px 8px; border-radius: 8px; text-decoration: none; }
.sprache span { background: var(--violett-tint); color: var(--violett-dunkel); }