@font-face { font-family: "Bricolage"; src: url("/fonts/BricolageGrotesque.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
/* Bierdeckel: Gelb als Grund, Papier für Karten, dunkles Braun als Tinte */
:root { --grund: #F4C542; --flaeche: #FFF6DC; --tinte: #2B1A0E; --leise: #5A3A1E; --linie: #2B1A0E; --link: #7A3E0C; --hero: #2B1A0E; --hero-text: #FFF6DC; }
@media (prefers-color-scheme: dark) {
  :root { --grund: #17110B; --flaeche: #241A11; --tinte: #F7E7C6; --leise: #C9B48F; --linie: #F7E7C6; --link: #F4C542; --hero: #F4C542; --hero-text: #17110B; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 500 17px/1.55 "Bricolage", -apple-system, system-ui, sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 32px 16px 48px; }
a { color: var(--link); font-weight: 700; }
h1 { font-size: 34px; line-height: 1.1; letter-spacing: -1px; font-weight: 800; margin: 24px 0 8px; text-wrap: balance; }
h2 { font-size: 21px; font-weight: 800; margin: 32px 0 6px; padding-top: 14px; border-top: 2px dashed var(--linie); }
h3 { font-size: 17px; font-weight: 800; margin: 20px 0 2px; }
p, ul { margin: 0 0 12px; }
.kopf { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.kopf img { width: 44px; height: 44px; border-radius: 10px; }
.kopf span { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.leise { color: var(--leise); }
.karte { background: var(--flaeche); border: 2px solid var(--linie); border-radius: 18px; padding: 18px 20px; margin: 16px 0; }
.karte h3 { margin-top: 0; }
.hero { background: var(--hero); color: var(--hero-text); border-radius: 28px; padding: 28px 24px; margin: 24px 0; }
.hero h1 { margin-top: 0; }
.hero p { opacity: 0.9; }
.knopf { display: inline-block; background: var(--hero-text); color: var(--hero); border-radius: 14px; padding: 12px 18px; text-decoration: none; font-weight: 800; }
.hinweis { border: 2px solid var(--linie); border-radius: 14px; padding: 12px 16px; font-weight: 700; }
ul.punkte { padding-left: 20px; }
footer { max-width: 680px; margin: 0 auto; padding: 0 16px 40px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
footer a { color: var(--leise); }