@font-face { font-family: "Bricolage"; src: url("/fonts/BricolageGrotesque.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
:root { --akzent: #1f4d3f; --akzent-text: #1f4d3f; --grund: #e9ece6; --flaeche: #ffffff; --tinte: #15201b; --leise: #5d6a63; --linie: #c9d0ca; }
@media (prefers-color-scheme: dark) {
  :root { --akzent-text: #7cc4a8; --grund: #101512; --flaeche: #1b221e; --tinte: #e9eee9; --leise: #a3aea7; --linie: #26302b; }
}
* { 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(--akzent-text); font-weight: 700; }
h1 { font-size: 34px; line-height: 1.1; letter-spacing: -1px; font-weight: 800; margin: 24px 0 8px; }
h2 { font-size: 21px; font-weight: 800; margin: 32px 0 6px; }
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-radius: 18px; padding: 18px 20px; margin: 16px 0; }
.hero { background: var(--akzent); color: #fff; border-radius: 28px; padding: 28px 24px; margin: 24px 0; }
.hero h1 { margin-top: 0; }
.hero p { opacity: 0.9; }
.knopf { display: inline-block; background: #fff; color: var(--akzent); border-radius: 14px; padding: 12px 18px; text-decoration: none; font-weight: 800; }
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); }