/* ==========================================================================
   Care Match – Seitenstyles: Impressum, Datenschutz, 404
   Präfix .p-legal (body-Klasse). Ergänzt main.css, überschreibt nichts global.
   ========================================================================== */

/* Lange Einzelwörter im Hero (z. B. «Datenschutzerklärung») auf Mobile */
.p-legal .display--long { font-size: clamp(1.9rem, 8.6vw, 6.25rem); overflow-wrap: normal; hyphens: manual; }

/* Fliesstext: Kapitel als Serif-Zwischentitel, Unterpunkte sans */
.p-legal .prose > :first-child { margin-top: 0; }
.p-legal .prose h3 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em;
  font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.15; margin: 2.4em 0 .6em;
}
.p-legal .prose h4 { font-size: 1rem; margin: 1.6em 0 .4em; color: var(--fg); }
.p-legal .prose h3 .num { color: var(--accent-2); margin-right: .35em; font-variant-numeric: tabular-nums; }
.p-legal .prose [id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
.p-legal .prose address { font-style: normal; color: var(--fg); line-height: 1.6; }
.p-legal .chapter--paper .prose a { color: var(--mint-700); }
.p-legal .chapter--paper .prose h3 .num { color: var(--mint-700); }

/* Tabelle horizontal scrollbar statt Seitenüberlauf */
.p-legal .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.4em 0 1.8em; }
.p-legal .table-wrap table { min-width: 640px; }
.p-legal .prose td small { display: block; color: var(--fg-3); margin-top: 4px; }

/* Faktenliste (Impressum) */
.p-legal .facts { margin: 0; display: grid; gap: 0; }
.p-legal .facts > div { border-top: 1px solid var(--line); padding: 16px 0; display: grid; grid-template-columns: 128px 1fr; gap: 12px 20px; }
.p-legal .facts > div:last-child { border-bottom: 1px solid var(--line); }
.p-legal .facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); padding-top: 3px; }
.p-legal .facts dd { margin: 0; color: var(--fg); line-height: 1.5; }
.p-legal .facts dd address { font-style: normal; }
.p-legal .facts dd a { color: var(--mint-300); text-decoration: none; }
.p-legal .facts dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) { .p-legal .facts > div { grid-template-columns: 1fr; gap: 4px; } }

/* Inhaltsverzeichnis (Datenschutz) */
.p-legal .toc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.p-legal .toc li { border-top: 1px solid var(--line); }
.p-legal .toc li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.p-legal .toc a { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: baseline; padding: 15px 0; color: var(--fg-2); text-decoration: none; transition: color .3s; }
.p-legal .toc a:hover { color: var(--fg); }
.p-legal .toc .num { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent-2); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .p-legal .toc { grid-template-columns: 1fr; }
  .p-legal .toc li:nth-last-child(2) { border-bottom: 0; }
}

/* Platzhalter-Markierung für spätere Ersetzung */
.p-legal .ph { color: var(--accent-2); font-weight: 600; }
.p-legal .chapter--paper .ph { color: var(--mint-700); }

/* Kompakte Kacheln ohne Visual (404, Hinweise) */
.p-legal .card--compact { display: flex; flex-direction: column; gap: 10px; }
.p-legal .card--compact h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
.p-legal .card--compact p { color: var(--fg-2); margin: 0; }
.p-legal .card--compact .link-arrow { margin-top: auto; padding-top: 14px; }

/* Tabelle auf Mobile als gestapelte Karten */
@media (max-width: 720px) {
  .p-legal .table-wrap { overflow: visible; }
  .p-legal .table-wrap table { min-width: 0; display: block; }
  .p-legal .table-wrap thead { display: none; }
  .p-legal .table-wrap tbody, .p-legal .table-wrap tr { display: block; }
  .p-legal .table-wrap tr { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 14px; margin-bottom: 14px; background: var(--surface); }
  .p-legal .table-wrap td { display: block; border: 0; padding: 10px 0; }
  .p-legal .table-wrap td + td { border-top: 1px solid var(--line); }
  .p-legal .table-wrap td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; }
}