@font-face { font-family: "Bricolage"; src: url(fonts/bricolage-grotesque-latin-standard-normal.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist"; src: url(fonts/geist-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --papier: #EEEAE2; --ink: #1D1B17; --soft: #5B554B; --zoll: #F2BD1D; }
* { box-sizing: border-box; }
html { background: var(--papier); }
body { margin: 0; background: var(--papier); color: var(--ink); font: 400 1.05rem/1.6 "Geist", system-ui, sans-serif; }
main { max-width: 44rem; margin: 0 auto; padding: 48px 16px 96px; }
.marke { display: inline-block; margin-bottom: 48px; font: 800 1.6rem/1 "Bricolage", system-ui, sans-serif; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
h1 { margin: 0 0 24px; font: 760 clamp(2.2rem, 6vw, 3.4rem)/1 "Bricolage", system-ui, sans-serif; letter-spacing: -0.03em; text-wrap: balance; }
h2 { margin: 40px 0 8px; font: 700 1.3rem/1.2 "Bricolage", system-ui, sans-serif; letter-spacing: -0.01em; }
p, li { max-width: 62ch; color: var(--ink); }
.soft { color: var(--soft); }
.hinweis { padding: 14px 18px; border-radius: 12px; background: #FFF4D2; border: 1px solid rgb(217 164 10 / 0.45); }
mark { background: var(--zoll); color: var(--ink); padding: 0 4px; border-radius: 4px; }
a { color: inherit; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.knopf { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--zoll); color: var(--ink); font-weight: 650; text-decoration: none; }