/* Unterseiten im Look der „Work in progress“-Startseite: Impressum, Datenschutz, 404.
   Lädt nach tokens.css und fonts.css (beide kopiert build.sh nach dist/assets/css). */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ms-kalk); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  color: var(--ms-espresso); font: 300 16px/1.7 var(--ms-sans);
  background: radial-gradient(120% 50% at 50% 0%, color-mix(in srgb, var(--ms-sand) 55%, transparent) 0%, transparent 60%), var(--ms-kalk);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.draft-note { width: 100%; padding: 10px var(--ms-space-2); background: var(--ms-sand); border-bottom: 1px solid var(--ms-line); text-align: center; font: 400 11px/1.6 var(--ms-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ms-basalt); }
.top { width: 100%; max-width: 760px; padding: var(--ms-space-4) 24px 0; display: flex; flex-direction: column; align-items: center; gap: var(--ms-space-3); }
.top img { width: 180px; height: auto; display: block; }
.back { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--ms-espresso); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--ms-line); transition: border-color var(--ms-fade) var(--ms-ease), color var(--ms-fade) var(--ms-ease); }
.back:hover, .back:focus-visible { border-color: var(--ms-gold); color: var(--ms-gold); outline: none; }
.hairline { width: 1px; height: 32px; background: var(--ms-gold); opacity: .55; }
main { flex: 1; width: 100%; max-width: 760px; padding: var(--ms-space-4) 24px var(--ms-space-5); }
h1 { font: 300 clamp(36px, 4.4vw, 52px)/1.08 var(--ms-serif); text-align: center; margin-bottom: var(--ms-space-4); }
.legal-doc { overflow-wrap: break-word; }
.legal-doc > * + * { margin-top: var(--ms-space-2); }
.legal-doc h2 { margin-top: var(--ms-space-5); font: 300 28px/1.2 var(--ms-serif); }
.legal-doc h2 + * { margin-top: var(--ms-space-2); }
.legal-doc ul { padding-left: 1.2em; }
.legal-doc strong { font-weight: 600; }
.legal-doc a { color: inherit; text-decoration-color: var(--ms-gold); text-underline-offset: 3px; }
mark.ph { background: var(--ms-sand); color: inherit; padding: 1px 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.ph mark.ph { background: var(--ms-travertin); }
.center { text-align: center; }
.center p { color: var(--ms-taupe); max-width: 440px; margin: 0 auto; }
.center .back { display: inline-block; margin-top: var(--ms-space-4); }
footer { width: 100%; padding: 20px 24px calc(20px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 8px 18px; flex-wrap: wrap; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ms-taupe); border-top: 1px solid color-mix(in srgb, var(--ms-travertin) 45%, transparent); }
footer a { color: inherit; text-decoration: none; transition: color var(--ms-fade) var(--ms-ease); }
footer a:hover, footer a:focus-visible { color: var(--ms-espresso); }
@media (max-width: 600px) { footer span { flex-basis: 100%; text-align: center; } .top { padding-top: var(--ms-space-3); } }
.legal-doc > h2:first-child { margin-top: 0; }