:root{
  --green:#2E5A27; --green-d:#244a1f; --green-lt:#EAF1E7;
  --ink:#222; --gray:#5a5f56; --muted:#8a8f84;
  --line:#d9ded2; --bg:#eef1ea; --card:#ffffff; --err:#b3261e;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55;
  padding:24px 14px;
}
.page-plain{display:flex;min-height:100vh;align-items:flex-start;justify-content:center}

.card{
  max-width:720px; margin:0 auto; background:var(--card);
  border:1px solid #e3e7dd; border-radius:16px; overflow:hidden;
  box-shadow:0 6px 24px rgba(40,60,30,.07);
}
.card--narrow{max-width:560px;width:100%}

.brand{background:var(--green); padding:22px 30px}
.brand__name{color:#fff; font-size:26px; font-weight:800; letter-spacing:.2px}
.brand__tag{color:#d7e4cf; font-size:14px; margin-top:2px}

.card__body{padding:26px 30px 30px}
.title{font-size:24px; margin:4px 0 8px; color:var(--ink)}
.lead{margin:0 0 22px; color:var(--gray)}

/* Sections */
.section{border:0; padding:0; margin:0 0 22px}
.section__h{
  font-size:15px; font-weight:700; color:var(--green);
  padding:0 0 7px; margin:0 0 14px; width:100%;
  border-bottom:2px solid var(--green);
}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row .field{flex:1 1 200px}
.field{margin:0 0 14px}
.field--plz{flex:0 0 120px}
.label{display:block; font-size:13.5px; color:var(--ink); margin:0 0 5px; font-weight:600}
.input{
  width:100%; font-size:16px; color:var(--ink); background:#fcfdfb;
  border:1px solid var(--line); border-radius:10px; padding:11px 12px;
  transition:border-color .12s, box-shadow .12s;
}
.input:focus{outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(46,90,39,.13); background:#fff}
.input.is-invalid{border-color:var(--err); box-shadow:0 0 0 3px rgba(179,38,30,.1)}
.hint{display:block; font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.45}
.hint--inline{display:inline; margin:0}
.hint--ok{color:var(--green); font-weight:600}
.hint--warn{color:#a8630c; font-weight:600}
.input.is-valid{border-color:var(--green); background:#fbfdfa}
.lead--klein{font-size:14px; margin-bottom:14px}

/* SEPA-Mandatstext */
.mandat{
  background:#f7f9f5; border:1px solid var(--line); border-left:3px solid var(--green);
  border-radius:8px; padding:13px 15px; margin:4px 0 12px; font-size:13.5px; line-height:1.55;
}
.mandat p{margin:0 0 9px}
.mandat p:last-child{margin-bottom:0}
.mandat__titel{font-weight:700; color:var(--green); font-size:13px; text-transform:uppercase; letter-spacing:.03em}
.mandat__meta{color:var(--gray); font-size:12.5px}
.err{display:none; font-size:12.5px; color:var(--err); margin-top:5px}
.err.show{display:block}

/* Options (radio / checkbox rows) */
.opt{
  display:flex; gap:11px; align-items:flex-start;
  padding:11px 13px; margin:0 0 9px;
  border:1px solid var(--line); border-radius:10px; background:#fcfdfb;
  cursor:pointer; font-size:14.5px;
}
.opt:hover{border-color:#bcc7ac}
.opt input{margin-top:2px; width:18px; height:18px; accent-color:var(--green); flex:0 0 auto}
.opt span{color:var(--ink)}

.field--betrag{margin:2px 0 10px 2px}
.betrag{display:flex; align-items:center; gap:8px; max-width:220px}
.betrag__cur{font-size:17px; color:var(--gray)}

/* Info box (payment) */
.info{
  background:var(--green-lt); border:1px solid var(--green);
  border-radius:10px; padding:14px 16px; margin:2px 0 12px;
}
.info p{margin:0 0 9px; font-size:14px}
.info p:last-child{margin-bottom:0}
.info b{color:var(--green-d)}

/* Buttons */
.btn{
  display:inline-block; background:var(--green); color:#fff; border:0;
  font-size:16px; font-weight:700; padding:13px 24px; border-radius:10px;
  cursor:pointer; text-decoration:none; transition:background .12s;
}
.btn:hover{background:var(--green-d)}
.btn:disabled{opacity:.6; cursor:progress}
.btn--submit{width:100%; margin-top:6px}

.fineprint{font-size:12px; color:var(--muted); margin:12px 0 0; text-align:center}

/* Honeypot — für Menschen unsichtbar */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Form-level error */
.formerr{
  background:#fdecea; border:1px solid #f3c2bd; color:var(--err);
  padding:11px 14px; border-radius:10px; font-size:14px; margin:0 0 14px;
}

/* Done / success panel */
.done{text-align:center; padding:10px 4px 6px}
.done__badge{
  width:56px; height:56px; border-radius:50%; margin:6px auto 12px;
  background:var(--green-lt); color:var(--green); font-size:30px; line-height:56px; font-weight:800;
}

/* Server-rendered pages */
.foot{padding:16px 30px 22px; border-top:1px solid #edefe9; color:var(--muted); font-size:12px}
.h1{font-size:20px; color:var(--green); margin:6px 0 12px}
.p{margin:0 0 12px}
.note{font-size:13px; color:var(--gray); background:#f6f7f3; border-radius:8px; padding:11px 13px; margin:12px 0 0}
.bank{border:1px solid var(--green); background:var(--green-lt); border-radius:8px; padding:12px 14px; margin:4px 0 12px; border-collapse:separate}
.bank__l{color:var(--gray); padding:3px 14px 3px 0; font-size:14px; vertical-align:top}
.bank__v{font-weight:700; padding:3px 0; font-size:14px}

@media (max-width:520px){
  body{padding:12px 8px}
  .card__body{padding:20px 18px 24px}
  .brand{padding:18px 20px}
  .foot{padding:14px 20px 20px}
  .field--plz{flex:1 1 120px}
}