:root{
  --gruen:#79A83C; --gruen-dunkel:#557A28; --blatt:#E8F1DA; --papier:#FDFDF9;
  --tinte:#26301F; --grau:#5C6653; --feuer:#E0913B; --radius:18px;
  --display:"Fraunces", Georgia, serif; --body:"Figtree", "Segoe UI", Arial, sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:var(--body); color:var(--tinte); background:var(--papier); font-size:17px; line-height:1.6; }
img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:3px solid var(--gruen); outline-offset:3px; border-radius:4px; }

header{ background:rgba(253,253,249,.95); border-bottom:1px solid #E3E8DA; padding:12px 24px; }
header .inner{ max-width:760px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
header img{ height:44px; width:auto; }
header a.zurueck{ color:var(--gruen-dunkel); font-weight:700; text-decoration:none; font-size:14.5px; }
header a.zurueck:hover{ text-decoration:underline; }

main{ max-width:760px; margin:0 auto; padding:36px 20px 90px; }
.fortschritt{ height:8px; background:var(--blatt); border-radius:999px; overflow:hidden; margin-bottom:10px; }
.fortschritt div{ height:100%; background:var(--gruen); border-radius:999px; width:0; transition:width .3s ease; }
.schritt-meta{ font-size:13px; color:var(--grau); margin-bottom:26px; }
h1{ font-family:var(--display); font-weight:500; font-size:clamp(26px,4.5vw,38px); line-height:1.15; margin-bottom:10px; }
.untertitel{ color:var(--grau); margin-bottom:28px; max-width:56ch; }

.feld{ margin-bottom:16px; }
.feld label{ display:block; font-weight:700; font-size:14px; margin-bottom:6px; }
.feld input, .feld select, .feld textarea{
  width:100%; font-family:var(--body); font-size:16px; padding:13px 14px; color:var(--tinte);
  border:1.5px solid #D5DCC9; border-radius:14px; background:#fff;
}
.feld input:focus, .feld select:focus, .feld textarea:focus{ outline:none; border-color:var(--gruen); box-shadow:0 0 0 3px rgba(121,168,60,.18); }
.feld .hinweis{ font-size:13px; color:var(--grau); margin-top:5px; }
.zwei{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .zwei{ grid-template-columns:1fr; } }

.wahl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:640px){ .wahl-grid{ grid-template-columns:repeat(4,1fr); } }
.wahl{
  border:1.5px solid #D5DCC9; border-radius:14px; background:#fff; cursor:pointer;
  padding:16px 10px; text-align:center; font-family:var(--body); font-size:14.5px; font-weight:600; color:var(--tinte);
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.wahl span.icon{ display:block; font-size:26px; margin-bottom:6px; }
.wahl:hover{ transform:translateY(-2px); }
.wahl.aktiv{ border-color:var(--gruen); background:var(--blatt); box-shadow:0 0 0 2px rgba(121,168,60,.25); }
.gruppe-titel{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gruen-dunkel); font-weight:700; margin:20px 0 10px; }
.gruppe-titel:first-child{ margin-top:0; }

.paket{ text-align:left; padding:18px; }
.paket small{ display:block; font-weight:400; font-size:13px; color:var(--grau); margin-top:6px; line-height:1.5; }
.paket-grid{ display:grid; gap:12px; }
@media (min-width:640px){ .paket-grid{ grid-template-columns:repeat(3,1fr); } }

.haken{ display:flex; align-items:flex-start; gap:12px; background:#fff; border:1.5px solid #D5DCC9; border-radius:14px; padding:14px 16px; margin-bottom:10px; cursor:pointer; }
.haken input{ width:22px; height:22px; margin-top:2px; accent-color:var(--gruen); flex:none; cursor:pointer; }
.haken strong{ display:block; font-size:15.5px; }
.haken small{ color:var(--grau); font-size:13px; line-height:1.45; }

.modus{ display:inline-flex; background:var(--blatt); border-radius:999px; padding:4px; margin-bottom:16px; }
.modus button{ border:none; background:transparent; font-family:var(--body); font-weight:700; font-size:14px; padding:9px 20px; border-radius:999px; cursor:pointer; color:var(--gruen-dunkel); }
.modus button.aktiv{ background:var(--gruen); color:#fff; }

.dauer-anzeige{ background:var(--blatt); border-radius:14px; padding:14px 18px; font-size:15px; margin-top:6px; }
.dauer-anzeige strong{ color:var(--gruen-dunkel); }

.zusammenfassung{ background:var(--blatt); border-radius:var(--radius); padding:22px 24px; margin-bottom:20px; }
.zusammenfassung dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:15px; }
.zusammenfassung dt{ color:var(--grau); }
.zusammenfassung dd{ font-weight:600; }

.fehler{ display:none; background:#FBEBE8; color:#8C2B1E; border-radius:12px; padding:12px 16px; font-size:14.5px; margin-bottom:16px; }
.fehler.sichtbar{ display:block; }

.aktionen{ display:flex; gap:12px; margin-top:30px; }
.btn{
  font-family:var(--body); font-weight:700; font-size:16px; border:none; cursor:pointer;
  padding:15px 30px; border-radius:999px; transition:transform .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-weiter{ background:var(--gruen); color:#fff; margin-left:auto; }
.btn-weiter:hover{ background:var(--gruen-dunkel); }
.btn-weiter:disabled{ opacity:.6; cursor:wait; transform:none; }
.btn-zurueck{ background:transparent; color:var(--gruen-dunkel); border:1.5px solid #C9D4B8; }
.schritt{ display:none; }
.schritt.aktiv{ display:block; }
.honig{ position:absolute; left:-9999px; top:-9999px; }

.erfolg{ display:none; text-align:center; padding:40px 0; }
.erfolg.sichtbar{ display:block; }
.erfolg .kreis{ width:96px; height:96px; border-radius:50%; background:var(--gruen); color:#fff; font-size:48px; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; }
.erfolg h1{ margin-bottom:12px; }
.erfolg p{ color:var(--grau); max-width:46ch; margin:0 auto 12px; }
.erfolg .btn-gross{ display:inline-block; text-decoration:none; background:var(--gruen); color:#fff; font-weight:700; font-size:18px; padding:18px 42px; border-radius:999px; margin-top:16px; }
.erfolg .btn-gross:hover{ background:var(--gruen-dunkel); }