/* Page-specific styles for impressum.html and datenschutz.html.
   Shared tokens, resets, topbar/brand, .btn and footer rules live in
   styles.css — this file only adds prose styling for legal text. */

main { padding-bottom: clamp(50px, 7vw, 80px); }

.legal-hero { padding-block: clamp(20px, 3.5vw, 32px) clamp(10px, 2vw, 18px); text-align: center; }
.legal-hero h1 { font-size: clamp(1.5rem, 6vw, 2.4rem); text-transform: uppercase; color: var(--accent); margin: 10px 0 0; overflow-wrap: break-word; word-break: break-word; }
.legal-hero p { color: var(--text-dim); margin: 10px auto 0; max-width: 60ch; }

.legal-content { max-width: 68ch; margin: 0 auto; padding-block: clamp(20px, 4vw, 40px); color: var(--text-dim); overflow-wrap: break-word; word-break: break-word; }
.legal-content h2 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--text); font-size: 1.25rem; margin: 2.2em 0 0.6em;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent); font-size: 0.82rem; margin: 1.6em 0 0.5em;
}
.legal-content p { margin: 0 0 1em; line-height: 1.65; }
.legal-content ul { margin: 0 0 1em; padding-left: 1.2em; }
.legal-content li { margin-bottom: 0.4em; line-height: 1.65; }
.legal-content strong { color: var(--text); }
.legal-content a { color: var(--accent); text-decoration: none; }
.legal-content a:hover { text-decoration: underline; }
.legal-content .legal-note {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 14px 18px; font-size: 0.9rem; margin: 1.4em 0;
}