/* Gemeinsames Layout für Datenschutz und Nutzungsbedingungen */
:root {
  --cream: #F5F1EA;
  --paper: #FFFFFF;
  --ink: #1C1D22;
  --muted: #6A6E78;
  --line: #E6DFD3;
  --super: #2B55E6;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; }
header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--ink); text-decoration: none; letter-spacing: -0.5px; }
.lang a { color: var(--muted); text-decoration: none; font-weight: 700; margin-left: 14px; }
.lang a:hover { color: var(--ink); }
h1 { font-family: var(--display); font-size: clamp(30px, 6vw, 44px); line-height: 1.1; margin: 36px 0 6px; letter-spacing: -1px; }
h2 { font-family: var(--display); font-size: 22px; margin: 34px 0 8px; }
.meta { color: var(--muted); font-size: 15px; margin: 0 0 8px; }
.note {
  background: #FFF4E5; border: 1px solid #F0C48A; border-radius: 14px; padding: 12px 16px;
  font-size: 15px; margin: 22px 0;
}
section { background: var(--paper); border-radius: 22px; padding: 6px 26px 26px; margin-top: 26px; }
section + section { margin-top: 40px; }
ul { padding-left: 22px; }
li { margin: 4px 0; }
a { color: var(--super); }
footer { color: var(--muted); font-size: 14px; text-align: center; margin-top: 40px; }
@media (max-width: 520px) { section { padding: 4px 18px 20px; } }