/* Seitenhülle für Rechtstexte (Impressum, Datenschutz).
   Die gemeinsame Landingpage-Schicht kommt aus lp.css - vorher stand derselbe
   Block (wrap, eyebrow, h2, sub, pill*, card24, header.top, footer a) hier ein
   drittes Mal und lief bereits auseinander. */
@import url("lp.css");

/* Legacy-Alias: impressum.html und datenschutz.html tragen noch .pill-dark im
   Markup. Die Klasse zeigt jetzt auf dieselben Token wie .pill-solid, statt
   background:var(--text-1);color:#fff zu setzen - das ergab im Dark Mode
   Weiß auf #E9F2F3, 1.14:1. */
.pill-dark{background:var(--btn-solid-bg);color:var(--btn-solid-fg)}
.pill-dark:hover{background:var(--accent-strong);color:var(--on-accent)}

/* Rechtstext-Typografie */
.legal{display:grid;grid-template-columns:236px minmax(0,1fr);gap:48px;align-items:start}
.toc{position:sticky;top:88px;font-size:var(--fs-sm);display:flex;flex-direction:column;gap:2px}
.toc strong{display:block;font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-3);padding:0 0 8px}
/* 44px Trefferfläche statt der bisherigen rund 28px. */
.toc a{color:var(--text-2);padding:11px 10px;border-radius:var(--r-sm);text-decoration:none;line-height:1.4}
.toc a:hover{background:var(--surface-2);color:var(--accent-strong);text-decoration:none}
.toc a:focus-visible{outline:none;box-shadow:var(--focus-ring-on-surface)}
.doc h3{font-family:var(--font-display);font-size:20px;font-weight:var(--fw-display);margin:40px 0 10px;scroll-margin-top:88px;text-wrap:balance}
.doc h3:first-of-type{margin-top:0}
.doc h4{font-size:var(--fs-body);font-weight:var(--fw-semibold);margin:22px 0 6px;color:var(--text-1)}
.doc p{margin:0 0 12px;color:var(--text-2);line-height:1.7;max-width:72ch;text-wrap:pretty}
.doc ul{margin:0 0 12px;padding-left:20px;color:var(--text-2);line-height:1.7;max-width:72ch}
.doc li{margin-bottom:5px}
.doc dl{margin:0 0 14px;display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px 20px;font-size:var(--fs-body)}
.doc dt{color:var(--text-2);font-size:var(--fs-sm);padding-top:2px}
.doc dd{margin:0;color:var(--text-1)}
.doc table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin:0 0 14px}
.doc table th,.doc table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text-2)}
/* Kopfzeilen tragen jetzt Textfarbe statt --text-3 in Versalien-Micro - lesbar,
   und im Markup gehört dazu scope="col" bzw. scope="row". */
.doc table thead th{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-1);border-bottom:1px solid var(--line-strong)}
.doc table tbody tr:last-child td{border-bottom:none}
/* Auszufüllende Angaben - im Entwurf sichtbar markiert */
.fill{font-family:var(--font-mono);font-size:.92em;background:var(--warn-dim);color:var(--warn);border-radius:var(--r-sm);padding:1px 7px;white-space:nowrap}
.notice{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--warn);border-radius:var(--r);padding:16px 18px;margin:0 0 32px}
.notice p{margin:0;font-size:var(--fs-sm);color:var(--text-2);line-height:1.6;max-width:none}

@media (max-width:860px){
.legal{grid-template-columns:1fr;gap:28px}
.toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
.toc strong{width:100%;padding-bottom:2px}
.toc a{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;font-size:var(--fs-sm)}
.doc dl{grid-template-columns:1fr;gap:2px 0}
.doc dt{padding-top:8px}
}
@media (max-width:540px){
.card24{padding-left:20px !important;padding-right:20px !important}
}