/* ============================================================
   TREVIT, legal pages (Datenschutz / AGB / Impressum)
   Reuses tokens + fonts from styles.css. Readable prose layout.
   ============================================================ */

.legal-page { background: var(--bg); }

/* simple header */
.legal-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.legal-header .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.legal-header .back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.legal-header .back svg { width: 16px; height: 16px; }
.legal-header .back:hover { color: var(--orange); }

/* content */
.legal { max-width: 820px; margin: 0 auto; padding: 56px 24px 100px; }
.legal .doc { display: none; }
.legal .doc.active { display: block; }
.legal .kicker { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); }
.legal h1 { font-size: clamp(30px, 5vw, 44px); margin: 12px 0 6px; letter-spacing: -0.03em; }
.legal .updated { color: var(--muted); font-size: 14px; margin-bottom: 38px; }
.legal h2 { font-size: 21px; margin: 38px 0 12px; letter-spacing: -0.01em; }
.legal h3 { font-size: 16px; margin: 22px 0 8px; font-weight: 700; }
.legal p, .legal li { color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--ink); }
.legal hr { border: none; border-top: 1px solid var(--line); margin: 34px 0; }

/* placeholder highlight, so you can spot what to fill in */
.legal .fill { background: #fff2cc; color: #6b4e00; padding: 1px 6px; border-radius: 5px; font-weight: 600; }

/* contact / entity box */
.legal .box {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; margin: 8px 0 18px;
}
.legal .box p { margin: 0; line-height: 1.6; }

/* dark mode (follows system) */
@media (prefers-color-scheme: dark) {
  .legal-page { background: #0f0f0f; }
  .legal-header { background: rgba(20,20,20,0.85); border-color: #2a2a2a; }
  .legal-header .back { color: #ddd; }
  .legal h1, .legal h2, .legal h3, .legal strong { color: #fff; }
  .legal p, .legal li { color: #cfcfcf; }
  .legal .box { background: #1a1a1a; border-color: #2a2a2a; }
  .legal hr { border-color: #2a2a2a; }
  .legal .fill { background: #4a3b00; color: #ffe08a; }
}

@media (max-width: 640px) {
  .legal { padding: 36px 18px 70px; }
}

/* ---------- Contact form ---------- */
.contact-card { max-width: 600px; }
.contact-form { margin-top: 26px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field input, .field textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,87,26,0.14);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.btn-submit {
  width: 100%; background: var(--grad); color: #fff; font-weight: 600; font-size: 15px;
  border-radius: 12px; padding: 14px 22px; box-shadow: var(--shadow-orange);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
}
.btn-submit:hover { transform: translateY(-2px); }
.btn-submit:disabled { opacity: 0.6; cursor: default; transform: none; }
.form-status { margin-top: 16px; font-size: 14.5px; font-weight: 500; display: none; }
.form-status.show { display: block; }
.form-status.ok { color: #1a7f37; }
.form-status.err { color: var(--orange-600); }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

@media (prefers-color-scheme: dark) {
  .field label { color: #fff; }
  .field input, .field textarea { background: #1a1a1a; border-color: #2a2a2a; color: #fff; }
  .form-status.ok { color: #4ade80; }
}