:root{--bg:#f6f7f4;--card:#fff;--ink:#14231c;--mute:#5b6b63;--acc:#1f7a52;--acc2:#e9f4ee;--line:#dde3df;--warn:#8a5a00;--warn2:#fdf4e3}
@media (prefers-color-scheme:dark){:root{--bg:#101814;--card:#17221c;--ink:#e6eee9;--mute:#9db0a6;--acc:#4cc38a;--acc2:#1d3328;--line:#2a3a31;--warn:#f0b44c;--warn2:#3a2d14}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
main{max-width:560px;margin:0 auto;padding:24px 16px 48px}
a{color:var(--acc)}
.brand{font-weight:700;text-decoration:none;color:var(--ink);font-size:15px}
.brand b{color:var(--acc)}
h1{font-size:28px;line-height:1.2;margin:14px 0 8px;text-wrap:balance}
p.sub{color:var(--mute);margin:0 0 20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.bar{height:6px;background:var(--line);border-radius:3px;margin-bottom:18px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc);transform-origin:left;transform:scaleX(0);transition:transform .3s}
.q{display:none}.q.on{display:block}
.q h2{font-size:20px;margin:0 0 14px}
.opt{display:block;width:100%;text-align:left;padding:14px 16px;margin:0 0 10px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.opt:hover,.opt:focus-visible{border-color:var(--acc);background:var(--acc2);outline:none}
input[type=text],input[type=email],input[type=tel],input[type=number]{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;margin:0 0 10px;background:var(--card);color:var(--ink)}
input:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.btn{display:block;width:100%;padding:15px;border:0;border-radius:12px;background:var(--acc);color:#fff;font:600 17px system-ui,sans-serif;cursor:pointer;text-align:center;text-decoration:none}
.btn:disabled{opacity:.6}
.back{background:none;border:0;color:var(--mute);font:inherit;font-size:14px;cursor:pointer;padding:6px 0;margin-top:4px}
.big{font-size:34px;font-weight:700;color:var(--acc);margin:4px 0}
.box{background:var(--acc2);border-radius:12px;padding:14px;margin:14px 0}
.box.warn{background:var(--warn2)}
.err{color:var(--warn);font-size:14px;margin:0 0 10px}
label.ck{display:flex;gap:10px;font-size:14px;color:var(--mute);margin:6px 0 14px}
label.ck input{margin-top:4px;flex:none}
small{color:var(--mute);font-size:13px}
.hp{position:absolute;left:-9999px}
.tiles{display:grid;gap:12px}
.tile{display:block;text-decoration:none;color:var(--ink)}
.tile:hover{border-color:var(--acc)}
.tile h2{margin:0 0 4px;font-size:19px}
.tile p{margin:0;color:var(--mute);font-size:15px}
footer{color:var(--mute);font-size:13px;text-align:center;margin-top:28px}
footer a{color:var(--mute)}
.legal h2{font-size:18px;margin:22px 0 6px}
.legal p,.legal li{font-size:15px}
@media (prefers-reduced-motion:reduce){.bar i{transition:none}}
.trust{list-style:none;padding:0;margin:14px 0;display:grid;gap:6px;font-size:15px}
.trust li{padding-left:26px;position:relative}
.trust li::before{content:'';position:absolute;left:4px;top:5px;width:12px;height:7px;border-left:3px solid var(--acc);border-bottom:3px solid var(--acc);transform:rotate(-45deg)}
.ratgeber{margin-top:36px;line-height:1.6}
.ratgeber h2{font-size:22px;margin:0 0 10px;text-wrap:balance}
.ratgeber h3{font-size:18px;margin:22px 0 6px}
.ratgeber p,.ratgeber li{font-size:16px;color:var(--ink)}
.ratgeber ul{padding-left:20px;margin:6px 0}
.mehr{margin-top:22px;font-size:15px;color:var(--mute)}
.mehr a{color:var(--acc)}