@font-face { font-family: "Headline"; src: url("headline.ttf") format("truetype"); font-display: swap; }
:root { --bg:#FFFFFF; --flaeche:#F3F2F6; --text:#17151F; --text2:#6C6979; --akzent:#D63A22; }
@media (prefers-color-scheme: dark) { :root { --bg:#121117; --flaeche:#1E1C26; --text:#F4F3F8; --text2:#A9A6B6; --akzent:#FF6A52; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 40px 20px 72px; }
header { max-width: 680px; margin: 0 auto; padding: 24px 20px 0; display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.marke { font-family:"Headline", sans-serif; font-size:22px; letter-spacing:-0.05em; color:var(--text); text-decoration:none; }
nav a { color:var(--text2); text-decoration:none; margin-left:18px; padding:12px 0; display:inline-block; }
nav a:first-child { margin-left:0; }
nav a:hover, nav a[aria-current] { color:var(--text); }
h1 { font-family:"Headline", sans-serif; font-size: clamp(32px, 8vw, 48px); line-height:1.05; letter-spacing:-0.05em; margin: 28px 0 16px; }
h2 { font-family:"Headline", sans-serif; font-size:21px; letter-spacing:-0.035em; margin: 40px 0 8px; }
p, li { color:var(--text); }
.klein { color:var(--text2); font-size:15px; }
.karte { background:var(--flaeche); border-radius:20px; padding:20px; margin:20px 0; }
.karte h2 { margin-top:0; }
ul { padding-left: 20px; }
a { color:var(--akzent); }
footer { max-width:680px; margin:0 auto; padding:0 20px 48px; color:var(--text2); font-size:15px; }
footer a { color:var(--text2); }