@font-face { font-family: "Lora"; src: url(fonts/lora-var.woff) format("woff"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter-semibold.woff) format("woff"); font-weight: 600; font-display: swap; }
:root { --kalk: #f4f6f4; --granit: #22282e; --schiefer: #56606a; --nebel: #d9e0de; --seeblau: #1d5671; --laerche: #b07a24; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--kalk); color: var(--granit); font: 400 1.0625rem/1.65 "Inter", system-ui, sans-serif; }
main, header, footer { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; }
header { padding-block: 1.5rem; }
.wordmark { font: 500 1.5rem/1 "Lora", Georgia, serif; color: var(--granit); text-decoration: none; }
.wordmark span { color: var(--laerche); }
h1 { font: 450 2.4rem/1.1 "Lora", Georgia, serif; letter-spacing: -0.02em; margin: 2.5rem 0 1.5rem; }
h2 { font: 600 1.0625rem/1.4 "Inter", system-ui, sans-serif; margin: 2.25rem 0 0.5rem; }
p, li { color: var(--granit); }
a { color: var(--seeblau); }
.stand { color: var(--schiefer); font-size: 0.9375rem; }
.todo { background: #f9eeda; padding: 0 0.25rem; }
footer { border-top: 1px solid var(--nebel); margin-top: 4rem; padding-block: 2rem 3rem; font-size: 0.875rem; color: var(--schiefer); }
footer a { color: var(--schiefer); margin-right: 1.5rem; }
@media (max-width: 760px) { main, header, footer { padding: 0 1rem; } h1 { font-size: 2rem; } }