/* Legal pages (Nutzungsbedingungen, Datenschutz, Impressum). Uses the app tokens
   from styles.css so the saved theme (incl. dark modes) applies here too. */
.legal-body { background: var(--bg); color: var(--text); min-height: 100vh; }
.legal-main { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.legal-nav a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.legal-nav a[aria-current="page"] { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.legal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px 32px; }
.legal-card h1 { margin: 0 0 4px; font-size: 26px; line-height: 1.25; }
.legal-card .legal-stand { margin: 0 0 22px; color: var(--text-muted); font-size: 13px; }
.legal-card h2 { margin: 28px 0 8px; font-size: 17px; }
.legal-card h3 { margin: 18px 0 6px; font-size: 15px; }
.legal-card p, .legal-card li { font-size: 14.5px; line-height: 1.7; color: var(--text); }
.legal-card ul, .legal-card ol { padding-left: 22px; margin: 6px 0 10px; }
.legal-card a { color: var(--primary); }
.legal-card .legal-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.legal-card table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 12px; }
.legal-card th, .legal-card td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-card th { color: var(--text-muted); font-weight: 600; }
.legal-op-missing { color: #b91c1c; font-weight: 600; }
.legal-address { white-space: pre-line; }
@media (max-width: 600px) {
  .legal-main { padding-top: 20px; }
  .legal-card { padding: 20px 18px; border-radius: 12px; }
  .legal-card h1 { font-size: 22px; }
  .legal-card table, .legal-card thead, .legal-card tbody, .legal-card tr, .legal-card th, .legal-card td { display: block; }
  .legal-card thead { display: none; }
  .legal-card td { border-bottom: 0; padding: 2px 0; }
  .legal-card tr { border-bottom: 1px solid var(--border); padding: 8px 0; }
}