/* bnb.bayern, the site's own stylesheet. Built 2026-09-20, verified 2026-09-20. Reads every value from tokens.css 1.1.0 and types none of its own. Three pages use it: index.html (body.landing), impressum.html and datenschutz.html. Sits at the vault root next to tokens.css and fonts/, because Safari lets a local page load only from its own folder and below. Mode pinned to light in each page's , brand/Modes.md makes light the default for everything personal, a site included. A dark variant is data-theme="dark" on and nothing else. */ html { background: var(--page); color: var(--text); font-family: var(--font-text); font-size: var(--size-body); line-height: var(--lh-body); font-variant-numeric: var(--numeric); } /* the display face appears twice on this site: the domain as the mark on the landing page and the page title here (brand/Name lockup.md, brand/Typography.md) */ h1 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-display); font-size: var(--size-display); margin: var(--space-32) 0 var(--space-8); } /* the one accent-filled element per region (brand/Palette.md, rule 1). Flat fill, no radius. */ .rule { width: 48px; height: 2px; background: var(--accent-fill); } a { color: var(--info-text); } a:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); } /* ---- the two document pages ---- */ body { margin: 0 auto; max-width: 720px; padding: var(--space-32) var(--space-24) var(--space-48); } .top { padding-bottom: var(--space-16); border-bottom: 1px solid var(--border); } .top a { font-size: var(--size-small); text-decoration: none; } .top a:hover { text-decoration: underline; } h1 + .rule { margin-bottom: var(--space-32); } /* section headings are Saira caps labels, the display face stays with the page title */ h2 { font-family: var(--font-text); font-size: var(--size-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-muted); line-height: var(--lh-ui); margin: var(--space-32) 0 var(--space-8); } p { margin: 0 0 var(--space-12); max-width: 72ch; } p.address { line-height: var(--lh-ui); } footer { margin-top: var(--space-48); padding-top: var(--space-16); border-top: 1px solid var(--border); font-size: var(--size-small); color: var(--text-muted); } footer nav { margin-bottom: var(--space-8); } footer nav span { color: var(--text-muted); } footer .stand { margin: 0; } /* ---- the landing page ---- */ body.landing { max-width: none; min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding: var(--space-24); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-24); text-align: center; } body.landing h1 { margin: 0; font-size: clamp(34px, 11vw, var(--size-display-xl)); } body.landing h1 + .rule { margin-bottom: 0; } body.landing nav { font-size: var(--size-ui); } body.landing nav span { color: var(--text-muted); padding: 0 var(--space-4); }