/* ========================================================================== Legal document layout - shared by the privacy policy and the terms An editorial reading page, not a dashboard: one column of body text held to a comfortable measure, a quiet contents rail, and no containers other than the two the eye actually needs (the summary panel and the contact block). Every colour here is either an existing site value or that value at reduced opacity - nothing new is introduced. ========================================================================== */ /* style.css sets `body { overflow-x: hidden !important }`. Because a non-visible value on one axis forces the other axis to compute as `auto`, that turns into a scroll container - and a sticky element cannot stick to a box that never scrolls, so the contents rail just scrolled away with the page. `clip` clips exactly the same way but does NOT force the other axis, so stays a normal box and the viewport does the scrolling. (Browsers without overflow: clip drop this line and keep the old behaviour.) */ body.legal-page-body { overflow-x: clip !important; } .legal-page { /* Existing site palette. */ --legal-ink: #0d0e11; /* body + headings, 18.9:1 on white */ --legal-muted: #545454; /* section numbers, meta, markers, 7.4:1 */ --legal-brand: #1f5fb8; /* links, 5.9:1 */ --legal-brand-dark: #1657d9; --legal-rule: #e4e9f1; /* hairlines */ --legal-panel: rgba(31, 95, 184, 0.04); /* brand at 4% - the only fill */ /* Measured in Inter at 18px: ~71 characters of English, ~64 of German (German sets longer because of its compounds). */ --legal-measure: 54ch; --legal-anchor-offset: 2rem; /* clearance for anchor jumps; raise this if the site header ever becomes sticky */ color: var(--legal-ink); /* Fixed type scale, identical at every breakpoint: section titles 20px, subheadings 18px, body 16px. */ font-size: 16px; line-height: 1.7; padding-block: 2.5rem 4.5rem; } @media (min-width: 768px) { .legal-page { padding-block: 3.5rem 6rem; } } /* -------------------------------------------------------------------------- Layout: single column on small screens, contents rail from 1024px up. -------------------------------------------------------------------------- */ .legal-layout { display: grid; gap: 0; } @media (min-width: 1024px) { .legal-layout { grid-template-columns: 16rem minmax(0, var(--legal-measure)); column-gap: 3.5rem; justify-content: center; } .legal-header { grid-column: 2; grid-row: 1; } /* Spanning both grid rows gives the rail the full page height to travel in; see the overflow-x note on body.legal-page-body for why it can stick. */ .legal-toc { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: 2.5rem; /* Optically level with the title's cap height rather than its line box. */ margin-top: 0.75rem; } .legal-body { grid-column: 2; grid-row: 2; } } /* -------------------------------------------------------------------------- Title block -------------------------------------------------------------------------- */ .legal-header { max-width: var(--legal-measure); } .legal-title { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--legal-ink); } /* Small caps meta line, tight under the title. */ .legal-meta { margin: 0.65rem 0 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--legal-muted); } .legal-intro { margin-top: 1.75rem; } .legal-intro p { margin: 0 0 1rem; } .legal-intro p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- "At a glance" - one of only two panels on the page. -------------------------------------------------------------------------- */ .legal-glance { margin-top: 2.5rem; padding: 1.75rem 1.75rem 1.5rem; background: var(--legal-panel); border-top: 2px solid var(--legal-brand); } .legal-glance__title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--legal-ink); } .legal-glance__note { margin: 0.6rem 0 1.25rem; font-size: 16px; line-height: 1.6; color: var(--legal-ink); } .legal-glance__list { margin: 0; padding: 0; list-style: none; } .legal-glance__list > li { margin: 0; border-top: 1px solid var(--legal-rule); } .legal-glance__link { display: block; padding: 0.7rem 0; font-size: 16px; line-height: 1.5; color: var(--legal-ink); text-decoration: underline; text-decoration-color: var(--legal-rule); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .legal-glance__link:hover, .legal-glance__link:focus-visible { color: var(--legal-brand-dark); text-decoration: underline; text-underline-offset: 0.18em; } /* -------------------------------------------------------------------------- Table of contents -------------------------------------------------------------------------- */ .legal-toc { margin-top: 2.5rem; } .legal-toc__details { border-top: 1px solid var(--legal-rule); border-bottom: 1px solid var(--legal-rule); } .legal-toc__summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 0; cursor: pointer; list-style: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--legal-muted); } .legal-toc__summary::-webkit-details-marker { display: none; } .legal-toc__counter { display: none; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--legal-muted); } /* Bootstrap Icons, the set the site header already uses. */ .legal-toc__chevron { font-size: 0.75rem; line-height: 1; transition: transform 0.15s ease; } .legal-toc__details[open] > .legal-toc__summary .legal-toc__chevron { transform: rotate(180deg); } .legal-toc__list { margin: 0; padding: 0 0 1rem; list-style: none; counter-reset: none; } .legal-toc__link { position: relative; display: flex; align-items: baseline; gap: 0.6rem; padding: 0.35rem 0; font-size: 0.9375rem; line-height: 1.45; color: var(--legal-muted); text-decoration: none; } .legal-toc__number { flex: none; min-width: 1.4ch; font-variant-numeric: tabular-nums; color: var(--legal-muted); } .legal-toc__link:hover, .legal-toc__link:focus-visible { color: var(--legal-ink); text-decoration: underline; text-underline-offset: 0.18em; } .legal-toc__link.is-current { color: var(--legal-ink); font-weight: 600; } @media (min-width: 1200px) { .legal-layout { grid-template-columns: 17rem minmax(0, var(--legal-measure)); column-gap: 5rem; } } /* Wide screens. The type scale is fixed at 20/18/16, so the text column cannot grow with the window - a 16px body at 54ch is ~545px wide whatever the screen. The extra room therefore goes to the contents rail and the gutter only. To fill more width than this the measure itself would have to widen, which costs line length: 54ch is ~65 characters of German, ~70 of English. */ @media (min-width: 1400px) { .legal-layout { grid-template-columns: 19rem minmax(0, var(--legal-measure)); column-gap: 6.5rem; } .legal-toc { top: 3rem; } } @media (min-width: 1800px) { .legal-layout { grid-template-columns: 21rem minmax(0, var(--legal-measure)); column-gap: 8rem; } } @media (min-width: 1024px) { .legal-toc { margin-top: 3.5rem; } /* The rail is permanent on desktop, so the disclosure chrome goes away and the contents list is shown whether or not the

element is open. That keeps the sidebar working with JavaScript disabled. */ .legal-toc__details { position: relative; border: 0; border-left: 1px solid var(--legal-rule); padding-left: 1.25rem; } /* The rail doubles as a reading gauge: the brand fill tracks how far through the policy the reader is. --legal-toc-progress is set in privacy-policy.js. */ .legal-toc__details::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: var(--legal-toc-progress, 0%); background: var(--legal-brand); transition: height 0.2s ease; } .legal-toc__summary { padding: 0 0 0.75rem; cursor: default; } .legal-toc__counter { display: inline; } .legal-toc__chevron { display: none; } /* Reveal the list even while the element is closed, so the rail survives with JavaScript off. Two spellings: the modern ::details-content pseudo, and the older "hide the slotted children" behaviour. */ .legal-toc__details::details-content { content-visibility: visible; block-size: auto; } .legal-toc__details > .legal-toc__list { display: block; padding-bottom: 0; } .legal-toc__link.is-current::before { content: ""; position: absolute; left: calc(-1.25rem - 4px); top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--legal-brand); box-shadow: 0 0 0 3px #fff; } /* Sections already read stay legible; the ones ahead recede. */ .legal-toc__link.is-read { color: #2b3037; } } /* -------------------------------------------------------------------------- Body: measure, rhythm, headings -------------------------------------------------------------------------- */ .legal-body { max-width: var(--legal-measure); margin-top: 3rem; } .legal-section { scroll-margin-top: var(--legal-anchor-offset); } .legal-section:focus { outline: none; } .legal-section__heading { position: relative; margin: 3.5rem 0 0.6rem; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--legal-ink); scroll-margin-top: var(--legal-anchor-offset); } .legal-section:first-child > .legal-section__heading { margin-top: 0; } @media (min-width: 768px) { .legal-section__heading { margin-top: 4.25rem; } } /* The number reads as structure, not as part of the sentence: muted, smaller, and on wide screens hung into the margin so heading text lines up with the body text below it. */ .legal-section__number { margin-right: 0.55em; font-size: 0.82em; font-weight: 500; color: var(--legal-muted); font-variant-numeric: tabular-nums; } @media (min-width: 1024px) { .legal-section__number { position: absolute; right: 100%; margin-right: 0; padding-right: 0.7em; top: 0.22em; } } .legal-subheading { margin: 2.25rem 0 0.5rem; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--legal-ink); scroll-margin-top: var(--legal-anchor-offset); } .legal-prose p { margin: 0 0 1.15rem; } .legal-prose p:last-child { margin-bottom: 0; } .legal-prose strong { font-weight: 600; } /* Lists: hanging indent, muted markers, room to breathe. These are what readers scan in sections 3, 4, 8 and 11. */ .legal-prose ul { margin: 0 0 1.35rem; padding: 0; list-style: none; } .legal-prose ul > li { position: relative; padding-left: 1.35em; margin-bottom: 0.6rem; } .legal-prose ul > li:last-child { margin-bottom: 0; } .legal-prose ul > li::before { content: "\2022"; position: absolute; left: 0.15em; top: -0.02em; color: var(--legal-muted); opacity: 0.65; } /* Ordered lists get the same hanging indent, with muted numerals. */ .legal-prose ol { margin: 0 0 1.35rem; padding: 0; list-style: none; counter-reset: legal-ordered; } .legal-prose ol > li { position: relative; padding-left: 1.9em; margin-bottom: 0.6rem; counter-increment: legal-ordered; } .legal-prose ol > li:last-child { margin-bottom: 0; } .legal-prose ol > li::before { content: counter(legal-ordered) "."; position: absolute; left: 0; color: var(--legal-muted); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Links: never colour alone. -------------------------------------------------------------------------- */ .legal-prose a, .legal-intro a, .legal-contact a, .legal-link { color: var(--legal-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; } .legal-prose a:hover, .legal-intro a:hover, .legal-contact a:hover, .legal-link:hover { color: var(--legal-brand-dark); text-decoration-thickness: 2px; } .legal-page a:focus-visible, .legal-page button:focus-visible, .legal-page summary:focus-visible { outline: 2px solid var(--legal-brand); outline-offset: 3px; border-radius: 2px; } /* -------------------------------------------------------------------------- Cookie preferences button (section 6) -------------------------------------------------------------------------- */ .legal-actions { margin-top: 1.5rem; } .legal-button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.15rem; border: 1px solid var(--legal-brand); border-radius: 4px; background: #fff; color: var(--legal-brand); font-size: 16px; font-weight: 600; line-height: 1.4; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .legal-button:hover { background: var(--legal-brand); color: #fff; } /* -------------------------------------------------------------------------- Contact block - the second and last panel on the page. -------------------------------------------------------------------------- */ .legal-contact { margin-top: 4rem; padding-top: 1.75rem; border-top: 1px solid var(--legal-rule); } .legal-contact__title { margin: 0 0 0.5rem; font-size: 18px; font-weight: 600; color: var(--legal-ink); } .legal-contact p { margin: 0; color: var(--legal-muted); } /* -------------------------------------------------------------------------- Motion preferences -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html:has(.legal-page) { scroll-behavior: auto !important; } .legal-page *, .legal-page *::before, .legal-page *::after { transition: none !important; animation: none !important; } } /* -------------------------------------------------------------------------- Print: the document, and nothing else. -------------------------------------------------------------------------- */ @media print { .top-bar, .navbar, .footer, .offcanvas, .legal-toc, .legal-actions { display: none !important; } .legal-page { font-family: Georgia, "Times New Roman", Times, serif !important; font-size: 11pt; line-height: 1.5; color: #000; padding: 0; } .legal-page *:not(.bi) { font-family: Georgia, "Times New Roman", Times, serif !important; } .legal-layout { display: block; } .legal-header, .legal-body { max-width: none; } .legal-glance { background: none; border: 1px solid #999; padding: 10pt 12pt; } .legal-section { break-inside: avoid-page; } .legal-section__heading, .legal-subheading, .legal-glance__title, .legal-contact__title { break-after: avoid-page; } .legal-section__number { position: static; padding-right: 0; margin-right: 0.5em; } .legal-page a { color: #000; text-decoration: underline; } /* Paper has no hyperlinks - print the destination. Mail links are skipped: their link text is already the address. */ .legal-page a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; } }