diff --git a/src/App.jsx b/src/App.jsx
index 6f61cd7..25b813d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -11,6 +11,7 @@ import CustomersPage from './pages/CustomersPage'
 import LeadsPage from './pages/LeadsPage'
 import CustomerDetailPage from './pages/CustomerDetailPage'
 import FinancePage from './pages/FinancePage'
+import LegalPage from './pages/LegalPage'
 
 function ProtectedRoute({ children }) {
   const { user, loading } = useAuth()
@@ -43,6 +44,7 @@ function AppRoutes() {
       <Route path="/customers/:id" element={<ProtectedRoute><CustomerDetailPage /></ProtectedRoute>} />
       <Route path="/leads" element={<ProtectedRoute><LeadsPage /></ProtectedRoute>} />
       <Route path="/finance" element={<ProtectedRoute><FinancePage /></ProtectedRoute>} />
+      <Route path="/rechtliches" element={<ProtectedRoute><LegalPage /></ProtectedRoute>} />
       <Route path="/planboard" element={<ProtectedRoute><PlanboardPage /></ProtectedRoute>} />
       <Route path="/projects" element={<ProtectedRoute><ProjectsPage /></ProtectedRoute>} />
       <Route path="/admin" element={<ProtectedRoute><AdminPage /></ProtectedRoute>} />
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index fff4ddb..f4589a1 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -6,6 +6,7 @@ import {
   IconUsers,
   IconTargetArrow,
   IconReportMoney,
+  IconScale,
   IconFolders,
   IconCalendar,
   IconSettings,
@@ -25,7 +26,7 @@ export default function Sidebar() {
     navigate('/login')
   }
 
-  // Eine flache Liste: fuer ein kleines Team reichen sieben Eintraege ohne Gruppen
+  // Eine flache Liste: fuer ein kleines Team reichen acht Eintraege ohne Gruppen
   const links = [
     { label: 'Tickets', href: '/tickets', icon: <IconTicket /> },
     { label: 'Planboard', href: '/planboard', icon: <IconCalendar /> },
@@ -33,6 +34,7 @@ export default function Sidebar() {
     { label: 'Kunden', href: '/customers', icon: <IconUsers /> },
     { label: 'Leads', href: '/leads', icon: <IconTargetArrow /> },
     { label: 'Finanzen', href: '/finance', icon: <IconReportMoney /> },
+    { label: 'Rechtliches', href: '/rechtliches', icon: <IconScale /> },
     ...(isAdmin ? [{ label: 'Admin', href: '/admin', icon: <IconSettings /> }] : []),
   ]
 
diff --git a/src/components/legal/ContractForm.jsx b/src/components/legal/ContractForm.jsx
new file mode 100644
index 0000000..cc42ba8
--- /dev/null
+++ b/src/components/legal/ContractForm.jsx
@@ -0,0 +1,106 @@
+import { useState } from 'react'
+import { FaTimes } from 'react-icons/fa'
+import { Button } from '../ui'
+
+const FIELDS = ['provider', 'purpose', 'cost', 'costInterval', 'startDate', 'termMonths', 'renewalMonths', 'noticeValue', 'noticeUnit', 'note']
+const NUMBERS = ['termMonths', 'renewalMonths', 'noticeValue']
+
+function toForm(contract) {
+  const form = { costInterval: 'month', noticeUnit: 'months' }
+  for (const key of FIELDS) {
+    if (contract?.[key] !== null && contract?.[key] !== undefined) form[key] = String(contract[key])
+  }
+  return form
+}
+
+/** Leere Felder werden null, damit die Fristenlogik "Fristen fehlen" erkennt. */
+function toDoc(form) {
+  const doc = {}
+  for (const key of FIELDS) {
+    const raw = (form[key] ?? '').trim()
+    if (raw === '') doc[key] = null
+    else if (NUMBERS.includes(key)) doc[key] = parseInt(raw, 10)
+    else if (key === 'cost') doc[key] = parseFloat(raw.replace(',', '.'))
+    else doc[key] = raw
+  }
+  return doc
+}
+
+export default function ContractForm({ contract, onSave, onClose }) {
+  const [form, setForm] = useState(() => toForm(contract))
+  const [files, setFiles] = useState([])
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState(null)
+  const set = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }))
+
+  const submit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    try {
+      await onSave(toDoc(form), files)
+      onClose()
+    } catch (err) {
+      setError(err.message)
+      setSaving(false)
+    }
+  }
+
+  const input = (key, label, props = {}) => (
+    <div className="form-group">
+      <label className="form-label">{label}</label>
+      <input className="form-control" name={key} value={form[key] || ''} onChange={set(key)} {...props} />
+    </div>
+  )
+
+  return (
+    <div className="overlay">
+      <span className="overlay-close" onClick={onClose}><FaTimes /></span>
+      <div className="overlay-content">
+        <h2 className="mb-2">{contract ? 'Vertrag bearbeiten' : 'Neuer Vertrag'}</h2>
+        {error && <div className="legal-error">{error}</div>}
+        <form onSubmit={submit}>
+          {input('provider', 'Anbieter', { required: true })}
+          {input('purpose', 'Wofür')}
+          <div className="legal-form-row">
+            {input('cost', 'Kosten (€)', { inputMode: 'decimal' })}
+            <div className="form-group">
+              <label className="form-label">pro</label>
+              <select className="form-control" name="costInterval" value={form.costInterval} onChange={set('costInterval')}>
+                <option value="month">Monat</option>
+                <option value="year">Jahr</option>
+              </select>
+            </div>
+          </div>
+          {input('startDate', 'Vertragsbeginn', { type: 'date' })}
+          <div className="legal-form-row">
+            {input('termMonths', 'Laufzeit (Monate, 0 = jederzeit kündbar)', { type: 'number', min: 0 })}
+            {input('renewalMonths', 'Verlängert sich um (Monate, 0 = endet)', { type: 'number', min: 0 })}
+          </div>
+          <div className="legal-form-row">
+            {input('noticeValue', 'Kündigungsfrist', { type: 'number', min: 0 })}
+            <div className="form-group">
+              <label className="form-label">Einheit</label>
+              <select className="form-control" name="noticeUnit" value={form.noticeUnit} onChange={set('noticeUnit')}>
+                <option value="months">Monate</option>
+                <option value="days">Tage</option>
+              </select>
+            </div>
+          </div>
+          <div className="form-group">
+            <label className="form-label">Notiz</label>
+            <textarea className="form-control" name="note" rows={3} value={form.note || ''} onChange={set('note')} />
+          </div>
+          <div className="form-group">
+            <label className="form-label">Dateien hinzufügen</label>
+            <input type="file" multiple accept=".pdf,.html,.htm,.png,.jpg,.jpeg,.webp,.doc,.docx" onChange={(e) => setFiles([...e.target.files])} />
+          </div>
+          <div className="flex gap-2">
+            <Button variant="primary" type="submit" disabled={saving}>{saving ? 'Speichert …' : 'Speichern'}</Button>
+            <Button type="button" onClick={onClose}>Abbrechen</Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/legal/LegalTextsTab.jsx b/src/components/legal/LegalTextsTab.jsx
new file mode 100644
index 0000000..37fd129
--- /dev/null
+++ b/src/components/legal/LegalTextsTab.jsx
@@ -0,0 +1,84 @@
+import { useState } from 'react'
+import { Badge, Button, Card } from '../ui'
+import { currentVersion, formatDate } from '../../lib/legal'
+import VersionForm from './VersionForm'
+import { FileLinks } from './legalUi'
+
+const byNewest = (a, b) => (b.validFrom || '').localeCompare(a.validFrom || '')
+
+export default function LegalTextsTab({ documents, versions, fileNames, addVersion, promoteDraft }) {
+  const [open, setOpen] = useState(null)
+  const [formFor, setFormFor] = useState(null)
+  const [actionError, setActionError] = useState(null)
+
+  const promote = async (v) => {
+    setActionError(null)
+    try {
+      await promoteDraft(v)
+    } catch (err) {
+      setActionError(err.message)
+    }
+  }
+
+  return (
+    <div className="legal-grid">
+      {actionError && <div className="legal-error">{actionError}</div>}
+      {documents.map((doc) => {
+        const own = versions.filter((v) => v.documentKey === doc.key).sort(byNewest)
+        const current = currentVersion(own)
+        const drafts = own.filter((v) => v.status === 'draft')
+        const expanded = open === doc.key
+        return (
+          <Card
+            key={doc.$id}
+            className="legal-doc"
+            title={doc.title}
+            actions={<Button size="sm" onClick={() => setFormFor(doc)}>Neue Version</Button>}
+          >
+            <div className="legal-doc-summary" onClick={() => setOpen(expanded ? null : doc.key)} role="button">
+              {current ? (
+                <Badge tone="ok">{current.version} · gilt seit {formatDate(current.validFrom)}</Badge>
+              ) : (
+                <Badge tone="muted">noch keine gültige Version</Badge>
+              )}
+              {drafts.map((d) => (
+                <Badge key={d.$id} tone="muted">Entwurf {d.version}</Badge>
+              ))}
+              <span className="faint legal-toggle">{expanded ? 'Verlauf ausblenden' : `Verlauf (${own.length})`}</span>
+            </div>
+            {doc.liveUrl && (
+              <a href={doc.liveUrl} target="_blank" rel="noreferrer" className="legal-live">Live-Seite öffnen</a>
+            )}
+            {expanded && (
+              <ol className="legal-history">
+                {own.length === 0 && <li className="faint">Noch keine Versionen eingetragen.</li>}
+                {own.map((v) => (
+                  <li key={v.$id} className={`legal-version legal-version-${v.status}`}>
+                    <div className="legal-version-head">
+                      <strong>{v.version}</strong>
+                      <span>{formatDate(v.validFrom)} – {v.status === 'current' ? 'heute' : formatDate(v.validTo)}</span>
+                      {v.status === 'current' && <Badge tone="ok">gültig</Badge>}
+                      {v.status === 'draft' && <Badge tone="muted">Entwurf</Badge>}
+                      {v.status === 'draft' && (
+                        <Button size="sm" onClick={() => promote(v)}>Als gültig markieren</Button>
+                      )}
+                    </div>
+                    {v.changeNote && <div className="legal-note">{v.changeNote}</div>}
+                    <FileLinks fileIds={v.fileIds} fileNames={fileNames} />
+                  </li>
+                ))}
+              </ol>
+            )}
+          </Card>
+        )
+      })}
+      {formFor && (
+        <VersionForm
+          title={formFor.title}
+          onSave={(input, files) => addVersion(formFor.key, input, files)}
+          onClose={() => setFormFor(null)}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/src/components/legal/ProviderContractsTab.jsx b/src/components/legal/ProviderContractsTab.jsx
new file mode 100644
index 0000000..336932e
--- /dev/null
+++ b/src/components/legal/ProviderContractsTab.jsx
@@ -0,0 +1,141 @@
+import { Fragment, useState } from 'react'
+import { Button, EmptyState } from '../ui'
+import { deadlineTone, formatDate, nextCancellationDate } from '../../lib/legal'
+import ContractForm from './ContractForm'
+import { FileLinks, todayIso } from './legalUi'
+
+const TONE_ORDER = { red: 0, orange: 1, normal: 2, missing: 3, grey: 4 }
+const euro = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' })
+
+function costLabel(c) {
+  if (c.cost === null || c.cost === undefined) return '–'
+  return `${euro.format(c.cost)}/${c.costInterval === 'year' ? 'Jahr' : 'Monat'}`
+}
+
+function termLabel(c) {
+  if (c.termMonths === null || c.termMonths === undefined) return '–'
+  if (c.termMonths === 0) return 'jederzeit kündbar'
+  const renew = c.renewalMonths ? `, verlängert um ${c.renewalMonths}` : ', endet danach'
+  return `${c.termMonths} Monate${renew}`
+}
+
+function noticeLabel(c) {
+  if (c.noticeValue === null || c.noticeValue === undefined) return '–'
+  return `${c.noticeValue} ${c.noticeUnit === 'days' ? 'Tage' : 'Monate'}`
+}
+
+function deadlineLabel(r) {
+  switch (r.state) {
+    case 'active': return `kündbar bis ${formatDate(r.noticeBy)} (Periode endet ${formatDate(r.periodEnd)})`
+    case 'anytime': return 'jederzeit kündbar'
+    case 'ends': return `endet am ${formatDate(r.periodEnd)}`
+    case 'ended': return `beendet seit ${formatDate(r.periodEnd)}`
+    case 'cancelled': return r.periodEnd ? `gekündigt zum ${formatDate(r.periodEnd)}` : 'gekündigt'
+    default: return 'Fristen fehlen'
+  }
+}
+
+export default function ProviderContractsTab({ contracts, fileNames, saveContract, deleteContract }) {
+  const [open, setOpen] = useState(null)
+  const [editing, setEditing] = useState(null)
+  const [cancelling, setCancelling] = useState(null)
+  const [endsAt, setEndsAt] = useState('')
+  const [actionError, setActionError] = useState(null)
+  const today = todayIso()
+
+  const rows = contracts
+    .map((c) => {
+      const result = nextCancellationDate(c, today)
+      return { c, result, tone: deadlineTone(result, today) }
+    })
+    .sort((a, b) =>
+      TONE_ORDER[a.tone] - TONE_ORDER[b.tone] ||
+      (a.result.noticeBy || a.result.periodEnd || '9999').localeCompare(b.result.noticeBy || b.result.periodEnd || '9999')
+    )
+
+  const run = async (fn) => {
+    setActionError(null)
+    try {
+      await fn()
+    } catch (err) {
+      setActionError(err.message)
+    }
+  }
+
+  const confirmCancel = (c) =>
+    run(async () => {
+      await saveContract({ cancelledAt: today, endsAt: endsAt || null }, [], c.$id)
+      setCancelling(null)
+    })
+
+  const remove = (c) => {
+    if (window.confirm(`Vertrag „${c.provider}“ wirklich löschen?`)) run(() => deleteContract(c.$id))
+  }
+
+  return (
+    <div>
+      <div className="toolbar">
+        <Button variant="primary" onClick={() => setEditing('new')}>Neuer Vertrag</Button>
+      </div>
+      {actionError && <div className="legal-error">{actionError}</div>}
+      {rows.length === 0 ? (
+        <EmptyState title="Noch keine Verträge eingetragen" />
+      ) : (
+        <table className="ui-table legal-contracts">
+          <thead>
+            <tr>
+              <th>Anbieter</th><th>Wofür</th><th>Kosten</th><th>Laufzeit</th><th>Kündigungsfrist</th><th>Nächster Termin</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map(({ c, result, tone }) => (
+              <Fragment key={c.$id}>
+                <tr className={`legal-tone-${tone}`} onClick={() => setOpen(open === c.$id ? null : c.$id)}>
+                  <td><strong>{c.provider}</strong></td>
+                  <td>{c.purpose || '–'}</td>
+                  <td>{costLabel(c)}</td>
+                  <td>{termLabel(c)}</td>
+                  <td>{noticeLabel(c)}</td>
+                  <td className="legal-deadline">{deadlineLabel(result)}</td>
+                </tr>
+                {open === c.$id && (
+                  <tr className="legal-detail">
+                    <td colSpan={6}>
+                      {c.startDate && <div>Beginn: {formatDate(c.startDate)}</div>}
+                      {c.note && <div className="legal-note">{c.note}</div>}
+                      <div><FileLinks fileIds={c.fileIds} fileNames={fileNames} /></div>
+                      <div className="flex gap-2 legal-actions">
+                        <Button size="sm" onClick={() => setEditing(c)}>Bearbeiten</Button>
+                        {!c.cancelledAt && cancelling !== c.$id && (
+                          <Button size="sm" onClick={() => { setCancelling(c.$id); setEndsAt(result.periodEnd || '') }}>
+                            Als gekündigt markieren
+                          </Button>
+                        )}
+                        {cancelling === c.$id && (
+                          <span className="flex gap-2 items-center">
+                            <label>Endet am</label>
+                            <input type="date" className="form-control" value={endsAt} onChange={(e) => setEndsAt(e.target.value)} />
+                            <Button size="sm" variant="primary" onClick={() => confirmCancel(c)}>Speichern</Button>
+                            <Button size="sm" onClick={() => setCancelling(null)}>Abbrechen</Button>
+                          </span>
+                        )}
+                        <Button size="sm" variant="danger" onClick={() => remove(c)}>Löschen</Button>
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </Fragment>
+            ))}
+          </tbody>
+        </table>
+      )}
+      {editing && (
+        <ContractForm
+          contract={editing === 'new' ? null : editing}
+          onSave={(doc, files) => saveContract(doc, files, editing === 'new' ? undefined : editing.$id)}
+          onClose={() => setEditing(null)}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/src/components/legal/VersionForm.jsx b/src/components/legal/VersionForm.jsx
new file mode 100644
index 0000000..21293b0
--- /dev/null
+++ b/src/components/legal/VersionForm.jsx
@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import { FaTimes } from 'react-icons/fa'
+import { Button } from '../ui'
+import { todayIso } from './legalUi'
+
+export default function VersionForm({ title, onSave, onClose }) {
+  const [form, setForm] = useState({ version: '', status: 'current', validFrom: todayIso(), changeNote: '' })
+  const [files, setFiles] = useState([])
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState(null)
+  const set = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }))
+
+  const submit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    try {
+      await onSave({ ...form, version: form.version.trim() }, files)
+      onClose()
+    } catch (err) {
+      setError(err.message)
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="overlay">
+      <span className="overlay-close" onClick={onClose}><FaTimes /></span>
+      <div className="overlay-content">
+        <h2 className="mb-2">Neue Version: {title}</h2>
+        {error && <div className="legal-error">{error}</div>}
+        <form onSubmit={submit}>
+          <div className="form-group">
+            <label className="form-label">Version</label>
+            <input className="form-control" name="version" value={form.version} onChange={set('version')} placeholder="z. B. v6" required />
+          </div>
+          <div className="form-group">
+            <label className="form-label">Status</label>
+            <select className="form-control" name="status" value={form.status} onChange={set('status')}>
+              <option value="current">Gültig</option>
+              <option value="draft">Entwurf (noch nicht live)</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <label className="form-label">Gültig ab</label>
+            <input className="form-control" type="date" name="validFrom" value={form.validFrom} onChange={set('validFrom')} required />
+          </div>
+          <div className="form-group">
+            <label className="form-label">Was hat sich geändert?</label>
+            <textarea className="form-control" name="changeNote" rows={4} value={form.changeNote} onChange={set('changeNote')} />
+          </div>
+          <div className="form-group">
+            <label className="form-label">Dateien (PDF, HTML, Bild, Word)</label>
+            <input type="file" multiple accept=".pdf,.html,.htm,.png,.jpg,.jpeg,.webp,.doc,.docx" onChange={(e) => setFiles([...e.target.files])} />
+          </div>
+          <div className="flex gap-2">
+            <Button variant="primary" type="submit" disabled={saving}>{saving ? 'Speichert …' : 'Speichern'}</Button>
+            <Button type="button" onClick={onClose}>Abbrechen</Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/legal/legalUi.jsx b/src/components/legal/legalUi.jsx
new file mode 100644
index 0000000..e815b9d
--- /dev/null
+++ b/src/components/legal/legalUi.jsx
@@ -0,0 +1,21 @@
+import { fileUrl, fileDownloadUrl } from '../../hooks/useLegal'
+
+/** Heutiges Datum in Ortszeit als 'YYYY-MM-DD'. */
+export function todayIso() {
+  return new Date().toLocaleDateString('sv-SE')
+}
+
+export function FileLinks({ fileIds = [], fileNames = {} }) {
+  if (!fileIds.length) return <span className="faint">keine Datei</span>
+  return (
+    <span className="legal-files">
+      {fileIds.map((id) => (
+        <span key={id}>
+          <a href={fileUrl(id)} target="_blank" rel="noreferrer">{fileNames[id] || 'Datei'}</a>
+          {' '}
+          <a href={fileDownloadUrl(id)} className="faint">(herunterladen)</a>
+        </span>
+      ))}
+    </span>
+  )
+}
diff --git a/src/pages/LegalPage.jsx b/src/pages/LegalPage.jsx
new file mode 100644
index 0000000..2b5bcb0
--- /dev/null
+++ b/src/pages/LegalPage.jsx
@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { EmptyState, PageHeader, Tabs } from '../components/ui'
+import { useLegalDocuments, useProviderContracts } from '../hooks/useLegal'
+import LegalTextsTab from '../components/legal/LegalTextsTab'
+import ProviderContractsTab from '../components/legal/ProviderContractsTab'
+
+const TABS = [
+  { id: 'texte', label: 'Unsere Rechtstexte' },
+  { id: 'anbieter', label: 'Verträge mit Anbietern' },
+]
+
+export default function LegalPage() {
+  const [tab, setTab] = useState('texte')
+  const texts = useLegalDocuments()
+  const contracts = useProviderContracts()
+  const active = tab === 'texte' ? texts : contracts
+
+  let body
+  if (active.loading) body = <div className="faint">Lädt …</div>
+  else if (active.missingSetup) {
+    body = (
+      <EmptyState
+        title="Rechtliches ist noch nicht eingerichtet"
+        hint="Die Appwrite-Sammlungen fehlen noch (Setup-Skript scripts/setup-legal.mjs)."
+      />
+    )
+  } else if (tab === 'texte') body = <LegalTextsTab {...texts} />
+  else body = <ProviderContractsTab {...contracts} />
+
+  return (
+    <div className="page">
+      <PageHeader title="Rechtliches" subtitle="Rechtstexte mit Versionsgeschichte und Verträge mit Anbietern" />
+      <Tabs tabs={TABS} active={tab} onChange={setTab} />
+      {active.error && <div className="legal-error">{active.error}</div>}
+      {body}
+    </div>
+  )
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index 2fcc841..eb90e1e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1108,3 +1108,36 @@ textarea.form-control {
   color: var(--text-faint);
   font-size: 12px;
 }
+
+/* --- Rechtliches --- */
+.legal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--sp-4); align-items: start; margin-top: var(--sp-4); }
+.legal-grid > .legal-error { grid-column: 1 / -1; }
+.legal-doc-summary { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; cursor: pointer; }
+.legal-toggle { margin-left: auto; font-size: 13px; }
+.legal-live { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--accent); }
+.legal-history { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
+.legal-version { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; font-size: 14px; }
+.legal-version-current { border-color: var(--ok); background: rgba(16, 185, 129, 0.08); }
+.legal-version-draft { border-style: dashed; }
+.legal-version-superseded { color: var(--text-muted); }
+.legal-version-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.legal-note { white-space: pre-wrap; margin: 4px 0; color: var(--text-muted); font-size: 13px; }
+.legal-files { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
+.legal-files a { color: var(--accent); }
+.legal-error { background: var(--danger); color: #fff; padding: 8px 12px; border-radius: var(--r-sm); margin: 8px 0; }
+.legal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
+.legal-contracts { margin-top: var(--sp-2); }
+.legal-contracts tbody tr { cursor: pointer; }
+.legal-tone-red td { background: rgba(239, 68, 68, 0.10); }
+.legal-tone-red .legal-deadline { color: var(--danger); font-weight: 700; }
+.legal-tone-orange td { background: rgba(245, 158, 11, 0.10); }
+.legal-tone-orange .legal-deadline { color: #b45309; font-weight: 600; }
+.legal-tone-missing .legal-deadline { color: var(--text-faint); font-style: italic; }
+.legal-tone-grey td { color: var(--text-faint); }
+.legal-detail td { background: var(--surface-2); cursor: default; }
+.legal-actions { margin-top: 8px; flex-wrap: wrap; }
+@media (max-width: 700px) {
+  .legal-grid { grid-template-columns: 1fr; }
+  .legal-form-row { grid-template-columns: 1fr; }
+  .legal-contracts { display: block; overflow-x: auto; }
+}