/* Impressum / Datenschutz — plain reading pages in the Mittendrin look.
   Reuses the theme tokens from styles.css. */
body.legal-page { height: auto; min-height: 100%; overscroll-behavior: auto; }
.legal-head, .legal-main, .legal-foot { max-width: 760px; margin: 0 auto; padding: 0 22px; }
.legal-head { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; padding-bottom: 8px; }
.legal-brand { color: var(--on-surface); text-decoration: none; }
.legal-brand .ascii-logo { font-size: clamp(2.6px, .78vw, 6px); }
.legal-back { align-self: flex-start; color: var(--on-surface-var); text-decoration: none; font-size: 14px; font-weight: 500; }
.legal-back:hover { color: var(--on-surface); }
.legal-main {
  margin-top: 18px; margin-bottom: 28px; padding-top: 6px; padding-bottom: 22px;
  background: var(--surface-container); border: 1px solid var(--outline-var);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  font-size: 15px; line-height: 1.6; overflow-wrap: anywhere;
}
.legal h1 { font-size: 30px; margin: 22px 0 10px; }
.legal h2 { font-size: 21px; margin: 30px 0 6px; }
.legal h3 { font-size: 16.5px; font-weight: 600; margin: 22px 0 4px; }
.legal p { margin: 8px 0; color: var(--on-surface); }
.legal a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.legal a:hover { color: var(--accent); }
.legal-foot { display: flex; gap: 18px; padding-bottom: 40px; font-size: 13.5px; }
.legal-foot a, .legal-foot button { color: var(--on-surface-var); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.legal-foot a:hover, .legal-foot button:hover { color: var(--on-surface); }