/* Shared styling for the standalone legal / contact pages (Impressum,
   Datenschutz, AGB, Kontakt). Kept separate from the app so these pages load
   fast and render even if the SPA bundle fails. */
:root {
  --blue: #185FA5;
  --ink: #1a1a1a;
  --muted: #5b6472;
  --line: #e5e7eb;
  --bg: #F8FAFD;
  --card: #ffffff;
}
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0; background: var(--bg); color: var(--ink); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.legal-header {
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 14px 20px; position: sticky; top: 0; z-index: 10;
}
.legal-header a.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 17px; color: var(--blue); text-decoration: none;
}
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; }
.legal-wrap h1 { font-size: 26px; margin: 8px 0 4px; }
.legal-wrap .updated { color: var(--muted); font-size: 13px; margin: 0 0 28px; }
.legal-wrap h2 {
  font-size: 18px; margin: 32px 0 10px; padding-top: 8px;
  border-top: 1px solid var(--line);
}
.legal-wrap h2:first-of-type { border-top: none; padding-top: 0; }
.legal-wrap h3 { font-size: 15px; margin: 20px 0 6px; }
.legal-wrap p, .legal-wrap li { font-size: 14.5px; color: #2a2f38; }
.legal-wrap ul { padding-left: 20px; }
.legal-wrap li { margin-bottom: 6px; }
.legal-wrap a { color: var(--blue); }
.legal-wrap table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13.5px; }
.legal-wrap th, .legal-wrap td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-wrap th { background: #f2f6fb; }
.legal-note {
  background: #FFF7ED; border: 1px solid #FED7AA; color: #9A3412;
  border-radius: 10px; padding: 12px 14px; font-size: 13px; margin: 18px 0;
}
.back-link { display: inline-block; margin-top: 32px; color: var(--blue); text-decoration: none; font-weight: 600; font-size: 14px; }
.legal-footer { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 20px; font-size: 12.5px; color: var(--muted); }
.legal-footer a { color: var(--muted); margin-right: 14px; }

/* Contact form */
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-row input, .form-row textarea {
  width: 100%; padding: 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 14px; font-family: inherit; background: #fff;
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--blue); }
.btn-primary {
  background: var(--blue); color: #fff; border: none; border-radius: 10px;
  padding: 13px 28px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.btn-primary:disabled { opacity: .6; cursor: default; }
.form-msg { font-size: 13.5px; margin-top: 14px; display: none; }
.form-msg.ok { color: #15803D; display: block; }
.form-msg.err { color: #DC2626; display: block; }

@media (prefers-color-scheme: dark) {
  :root { --ink: #e8eaed; --muted: #9aa4b2; --line: #2a2f38; --bg: #14171c; --card: #1c1f25; }
  body { color: var(--ink); }
  .legal-wrap p, .legal-wrap li { color: #cbd2dc; }
  .legal-wrap th { background: #23282f; }
  .form-row input, .form-row textarea { background: #23282f; color: var(--ink); }
  .legal-note { background: #3a2a12; border-color: #6b4a1e; color: #f0c894; }
}