
:root { --terra:#D9743B; --terra-dunkel:#9a3f12; --text:#3A2E27; --muted:#6E5F52; --line:#EFE4D6; --sand:#FBF6EF; --karte:#fff; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--text); background:var(--sand); line-height:1.6; }
main { max-width:880px; margin:0 auto; padding:24px 20px 64px; }
header.top { background:var(--karte); border-bottom:1px solid var(--line); }
header.top .inner { max-width:880px; margin:0 auto; padding:14px 20px; font-weight:800; color:var(--terra-dunkel); }
h1 { font-size:30px; margin:18px 0 6px; }
h2 { font-size:20px; margin:34px 0 10px; border-bottom:1px solid var(--line); padding-bottom:6px; }
.sub { color:var(--muted); font-size:15px; }
.badge { display:inline-block; background:#F4EADD; border:1px solid var(--terra); color:var(--terra-dunkel); border-radius:20px; padding:4px 12px; font-size:13px; font-weight:700; margin:8px 8px 0 0; }
.karten { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:14px 0; }
.karte { background:var(--karte); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.karte h3 { margin:0 0 6px; font-size:15.5px; color:var(--terra-dunkel); }
.karte p { margin:0; font-size:14px; }
ol.zeit { list-style:none; padding:0; margin:14px 0; counter-reset:s; }
ol.zeit li { position:relative; padding:0 0 18px 44px; counter-increment:s; }
ol.zeit li::before { content:counter(s); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; background:var(--terra); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px; }
ol.zeit li:not(:last-child)::after { content:""; position:absolute; left:13px; top:30px; bottom:0; width:2px; background:var(--line); }
form .feld { margin:12px 0; }
label { display:block; font-weight:600; margin-bottom:4px; }
input[type=text], input[type=email], input[type=tel], textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; color:inherit; }
input:focus, textarea:focus, button:focus { outline:3px solid rgba(217,116,59,.45); outline-offset:1px; }
button.cta { background:var(--terra); color:#fff; border:0; border-radius:12px; padding:12px 22px; font-size:16px; font-weight:800; cursor:pointer; }
button.cta:hover { background:var(--terra-dunkel); }
.hinweis { font-size:13px; color:var(--muted); }
.fehler { background:#FBE9E4; border:1px solid #c0512a; border-radius:10px; padding:10px 14px; color:#7a2f12; }
.likert { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px; }
fieldset { border:1px solid var(--line); border-radius:12px; margin:10px 0; padding:10px 14px; background:var(--karte); }
legend { font-weight:600; font-size:14px; padding:0 6px; }
footer.fuss { border-top:1px solid var(--line); margin-top:40px; padding:16px 20px; text-align:center; font-size:13px; color:var(--muted); }
footer.fuss a { color:var(--terra-dunkel); margin:0 10px; }
.hp { position:absolute; left:-9999px; top:-9999px; }
@media (max-width:560px){ h1{font-size:24px;} }
ol.sortliste { list-style:none; padding:0; margin:14px 0; counter-reset:s; }
ol.sortliste li { counter-increment:s; background:var(--karte); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; display:flex; gap:10px; align-items:center; justify-content:space-between; }
ol.sortliste li::before { content:counter(s); flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--sand); color:var(--terra-dunkel); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:13px; }
ol.sortliste[data-js="on"] li { cursor:grab; }
ol.sortliste li[data-dragging] { opacity:.5; }
ol.sortliste label { flex:1; font-weight:400; margin:0; }
ol.sortliste select { flex:0 0 auto; }
