.legal { padding-block: var(--s48) var(--s64); }
.legal-shell { max-width: 860px; }
.legal-head { margin-bottom: var(--s32); }
.legal-eyebrow { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); margin: 0 0 var(--s8); }
.legal-head .display { font-size: clamp(30px, 4vw, 44px); margin-bottom: var(--s8); }
.lang-jump { font-size: 14px; color: var(--text3); margin: 0; }
.sprachwahl { margin-top: 6px; }
.sprachwahl [aria-current] { color: var(--text); font-weight: 600; }
.legal-card { background: var(--surface); border-radius: var(--r); padding: var(--s40); }
.legal-card > :first-child { margin-top: 0; }
.legal-card h1 { font-size: 26px; line-height: 1.2; margin: var(--s40) 0 var(--s16); }
.legal-card h2 { font-size: 22px; line-height: 1.25; margin: var(--s32) 0 var(--s8); }
.legal-card h3 { font-size: 18px; line-height: 1.3; margin: var(--s24) 0 var(--s8); }
.legal-card p, .legal-card li { font-size: 16px; line-height: 1.65; color: var(--text2); }
.legal-card p { margin: 0 0 var(--s16); }
.legal-card ul { padding-left: 1.25em; margin: 0 0 var(--s16); display: grid; gap: 6px; }
.legal-card strong { color: var(--text); font-weight: 600; }
.legal-card em { font-style: italic; }
.legal-card a, .lang-jump a { color: var(--text); text-decoration: underline; text-decoration-color: var(--ctl); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-card a:hover, .lang-jump a:hover { text-decoration-color: var(--rot); }
.legal-card hr { border: 0; border-top: 1px solid var(--line); margin: var(--s40) 0; }
.legal-card .updated { font-size: 14px; color: var(--text3); }
.topnav a[aria-current="page"] { color: var(--rot); }
.nf { text-align: center; padding-block: var(--s96); }
.nf .display { margin-bottom: var(--s16); }
.nf .body { margin-inline: auto; color: var(--text2); }
.nf .btn { margin-top: var(--s24); }
.legal-card + .legal-card { margin-top: var(--s16); }
.legal-card { display: flow-root; }
.legal-card h2, .legal-card h3, .legal-card h4 { clear: both; }
.shot { float: right; width: 240px; margin: 4px 0 var(--s16) var(--s24); }
.shot + .shot { clear: right; }
/* Testanleitung: Das Bild steht NACH dem Schritt, den es zeigt — rechts schwebend
   bliebe links eine leere Fläche. Dort stehen die Bilder im Fluss, mehrere nebeneinander. */
.testanleitung .shot { float: none; display: inline-block; vertical-align: top; width: 220px; margin: var(--s8) var(--s16) var(--s16) 0; }
.testanleitung .shot + .shot { clear: none; }
.shot img { width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--line); background: var(--surface2); }
.shot figcaption { font-size: 13px; line-height: 1.4; color: var(--text3); margin-top: 6px; text-align: center; }
.legal-card h4 { font-size: 16px; line-height: 1.35; margin: var(--s16) 0 var(--s8); }
.legal-card ol { padding-left: 1.4em; margin: 0 0 var(--s16); display: grid; gap: 6px; }
.legal-card li > ul, .legal-card li > ol { margin: 6px 0 0; }
.legal-card code { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--surface2); padding: 1px 5px; border-radius: 6px; }
.legal-card pre { background: var(--surface2); border-radius: 12px; padding: var(--s16); overflow-x: auto; margin: 0 0 var(--s16); font-size: 14px; line-height: 1.5; color: var(--text); }
.legal-card pre code { background: none; padding: 0; font-size: inherit; }
.tabelle { overflow-x: auto; margin: 0 0 var(--s16); }
.legal-card table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.5; }
.legal-card th, .legal-card td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text2); }
.legal-card th { color: var(--text); font-weight: 600; }
.legal-card [id] { scroll-margin-top: 80px; }
.toc { margin-top: var(--s24); padding-top: var(--s24); border-top: 1px solid var(--line); }
.toc h2 { margin-top: 0; }
.toc > ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.toc > ol > li > a { font-weight: 600; color: var(--text); text-decoration: none; }
.toc > ol > li > a:hover { color: var(--rot); }
.toc ol ol { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.toc ol ol a { font-size: 14px; color: var(--text2); text-decoration: none; }
.toc ol ol a:hover { color: var(--rot); }
.topnav .nav-home { display: none; }
@media (max-width: 640px) {
  .topbar-legal .btn { display: none; }
  .topnav .nav-home { display: inline; }
  .shot { float: none; width: min(100%, 280px); margin: var(--s8) auto var(--s16); }
  .legal { padding-block: var(--s32) var(--s48); }
  .legal-card { padding: var(--s24); }
  .legal-card h2 { font-size: 20px; }
}