/* ============================================================ LEGAL — Datenschutz / Cookie-Richtlinie / Impressum Long-form prose layout for the website_legal app. Consumes the Kachelbunt semantic tokens only; squared corners throughout. No motion of its own — nothing here needs a reduced-motion escape hatch, and the global scroll reveal already handles the one animated element on the page (the outer
). Block: .legal ============================================================ */ /* ---- Page head --------------------------------------------- */ .legal__head { padding-bottom: var(--space-6); border-bottom: var(--border-line); } .legal__title { font: var(--type-h1); color: var(--text-strong); margin: 0; } .legal__lead { font: var(--type-body-lg); color: var(--text-body); margin: var(--space-5) 0 0; } /* ---- In-page contents (Datenschutz has 14 sections) --------- */ .legal__toc { margin-top: var(--space-7); padding: var(--space-5) var(--space-5) var(--space-5) var(--space-8); background: var(--surface-card); border: var(--border-card); box-shadow: var(--shadow-sm); } .legal__toc-list { /* Two columns where there is room; the auto-fill track collapses to one on narrow viewports without a breakpoint. */ display: grid; grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr)); gap: var(--space-2) var(--space-6); margin: 0; padding: 0 0 0 var(--space-4); } .legal__toc-list li { font: var(--type-small); } .legal__toc-list li::marker { font-family: var(--font-mono); color: var(--brand); } .legal__toc-list a { color: var(--text-body); text-decoration: none; } .legal__toc-list a:hover { color: var(--brand); text-decoration: underline; } /* ---- Sections ----------------------------------------------- */ .legal__section { margin-top: var(--space-9); /* Deep links land below the section rule, not flush against it. */ scroll-margin-top: var(--space-6); } .legal__section-title { font: var(--type-h3); color: var(--text-strong); margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--border-line); } /* ---- Prose --------------------------------------------------- */ /* Blocksatz für den Fließtext. hyphens gehört zwingend dazu: deutsche Komposita ("Auftragsverarbeitungsvertrag") reißen auf dem schmalen --container-text-Maß sonst sichtbare Lücken in die Zeilen. Die Silbentrennung greift über für DE und EN. */ .legal__lead, .legal p, .legal__list li { text-align: justify; hyphens: auto; } .legal p { font: var(--type-body); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0 0 var(--space-4); } .legal p:last-child { margin-bottom: 0; } .legal__list { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding-left: var(--space-5); } .legal__list li { font: var(--type-body); line-height: var(--leading-relaxed); color: var(--text-body); } .legal__list li::marker { color: var(--brand); } /* ---- Address / identity block (controller, imprint) ---------- */ /* Kein Blocksatz: Anschriften und Linkzeilen sind kurze, gesetzte Zeilen — gedehnte Wortabstände wirken hier wie ein Fehler. */ .legal__address, .legal__linkline { text-align: left; hyphens: manual; } .legal__address { padding: var(--space-4) var(--space-5); background: var(--surface-card); border: var(--border-card); border-left: var(--bw-4) solid var(--brand); color: var(--text-strong); } /* ---- Set-apart callout (Art 21(4) objection notice) ---------- */ .legal__callout { margin: var(--space-6) 0; padding: var(--space-5); background: var(--surface-sunken); border: var(--border-card); border-left: var(--bw-4) solid var(--ink); box-shadow: var(--shadow-sm); } .legal__callout p { color: var(--text-strong); } /* ---- Cross-page links ---------------------------------------- */ .legal__linkline { margin-top: var(--space-5); } .legal__link { font-weight: var(--fw-semibold); color: var(--text-link); text-decoration: none; } .legal__link:hover { text-decoration: underline; } /* ---- Cookie table (generated from the consent registry) ------ */ .legal__table-wrap { /* The measure here is --container-text (68ch); a five-column table needs more, so the wrapper — not the page body — takes the horizontal scroll. tabindex="0" in the template makes that scroller keyboard-reachable. */ margin: var(--space-5) 0; overflow-x: auto; background: var(--surface-card); border: var(--border-card); } .legal__table-wrap:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(var(--focus-offset) * -1); } .legal__table { min-width: var(--container-text); } /* Scoped to this wrapper on purpose — .kb-table itself stays untouched. */ .legal__table-name { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--text-strong); white-space: nowrap; } /* ---- Art 7(3) withdrawal control ----------------------------- */ .legal__withdraw { margin: var(--space-5) 0 var(--space-6); } /* ---- Narrow viewports ---------------------------------------- */ @media (max-width: 640px) { .legal__section { margin-top: var(--space-7); } .legal__section-title { font: var(--type-h4); } .legal__toc { padding-left: var(--space-5); } }