@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-standard-normal.woff2') format('woff2-variations'),
       url('fonts/bricolage-grotesque-latin-standard-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-serif-4-latin-400-italic.woff2') format('woff2');
}

html { scroll-behavior: smooth; }
body { margin: 0; background: #FAF7F5; }
a:focus-visible { outline: 3px solid #B02E62; outline-offset: 3px; border-radius: 4px; }
section[id] { scroll-margin-top: 16px; }

/* Unterseiten: Impressum, Datenschutz */
.legal { max-width: 760px; margin: 0 auto; padding: 32px 24px 96px; color: #17141A; font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; line-height: 1.6; }
.legal header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-bottom: 48px; }
.legal .logo { font-family: 'Bricolage Grotesque', Arial, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: #17141A; text-decoration: none; padding: 8px 0; }
.legal .logo span { color: #B02E62; }
.legal .back { font-family: 'Bricolage Grotesque', Arial, sans-serif; font-weight: 600; font-size: 16px; color: #17141A; text-underline-offset: 5px; padding: 12px 0; }
.legal { overflow-wrap: anywhere; }
.legal h1 { font-family: 'Bricolage Grotesque', Arial, sans-serif; font-weight: 700; font-size: clamp(28px, 8vw, 44px); hyphens: auto; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 32px; }
.legal h2 { font-family: 'Bricolage Grotesque', Arial, sans-serif; font-weight: 700; font-size: 22px; margin: 40px 0 8px; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 22px; }
.legal li { margin-bottom: 4px; }
.legal a { color: #B02E62; }