/* The page is short but the footer should still sit at the bottom.
   Applies here only, because only this page loads this sheet. */
body{display:flex;flex-direction:column;min-height:100vh}
body > main{flex:1 0 auto}
body > .site-head,body > .site-foot{flex:none}

/* ============================================================
   Cancellation in three steps - reason, warning, confirmation.
   The components are deliberately close to login.html (steps) and
   checkout.html (radio rows) so that nothing new has to be learned.
   ============================================================ */

.ks{padding:52px 0 84px;background:var(--ground)}

/* ---------- Heading above the card ---------- */
.ks-head{max-width:620px;margin:0 auto 28px;text-align:center}
.ks-head h1{font-size:42px;font-weight:800;letter-spacing:-1.8px;line-height:1.1}

/* ---------- Karte ---------- */
.ks-card{max-width:620px;margin:0 auto;background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:5px 5px 0 0 var(--black);padding:30px 32px 32px}
.ks-step[hidden]{display:none}
.ks-step h2{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.2}
.ks-step .lead{font-size:15px;color:var(--muted);line-height:1.6;margin-top:10px}

/* The warning and confirmation steps are centred, the questionnaire is left aligned */
.ks-step--ok,#ks-warning{text-align:center}
.ks-step .ic--lg{width:66px;height:66px;border-radius:12px;margin:0 auto 18px;display:grid;place-items:center}
.ks-warnzeichen{background:var(--yellow)}
.ks-check{background:var(--green)}

/* ---------- Reasons ---------- */
.krows{display:flex;flex-direction:column;gap:2px;margin-top:22px}
.krow{display:flex;align-items:center;gap:13px;width:100%;background:none;border:none;border-radius:4px;padding:12px 10px;cursor:pointer;text-align:left;transition:background .14s ease}
.krow:hover{background:#F3EFE2}
.krow.on{background:#F4F7EC}
.krow .rad{width:20px;height:20px;border:2px solid #C9C4B4;border-radius:50%;display:grid;place-content:center;flex:none;transition:border-color .14s ease}
.krow .rad::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--green);transform:scale(0);transition:transform .14s ease}
.krow.on .rad{border-color:var(--black)}
.krow.on .rad::after{transform:scale(1)}
.krow .t{font-size:15px;font-weight:700;line-height:1.4}
.krow.on .t{font-weight:800}

/* ---------- Freitext ---------- */
.ks-step .field{display:block;margin-top:20px}
.ks-step .field[hidden]{display:none}
.ks-step .lb{display:block;font-family:'Sora','Sora Fallback',sans-serif;font-size:12px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.ks-step .inp{width:100%;border:var(--bd);border-radius:var(--r);background:var(--ground);padding:13px 14px;font-family:'Inter','Inter Fallback',sans-serif;font-size:15px;font-weight:600;color:var(--text);resize:vertical;transition:box-shadow .16s ease,background-color .16s ease,transform .16s ease}
.ks-step .inp:focus{background:var(--white);transform:translate(-1px,-1px);box-shadow:4px 4px 0 0 var(--black);outline:none}
.ks-step .inp::placeholder{color:#9A9C90;font-weight:500}

/* Confirmation: the end date is the main statement, not an aside */
.ks-date{margin:22px 0 4px}
.ks-date-lbl{display:block;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.ks-date-day{display:block;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:34px;letter-spacing:-1.4px;margin-top:6px}
.ks-date-rest{display:block;font-size:14px;font-weight:700;color:var(--muted);margin-top:4px}

/* ---------- Knopfreihe ---------- */
.ks-akt{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
#ks-reason .ks-akt{justify-content:space-between}
#ks-warning .ks-akt,.ks-step--ok .ks-akt{justify-content:center}
/* Disabled is only greyed out, NOT offset - otherwise the button jumps by 2px */
.ks-akt .btn[disabled]{opacity:.45;cursor:not-allowed}
.ks-akt .btn[disabled]:hover{transform:none;box-shadow:4px 4px 0 0 var(--black);background:var(--orange)}

@media (max-width:620px){
  .ks{padding:36px 0 60px}
  .ks-card{padding:24px 20px 26px}
  .ks-head h1{font-size:32px;letter-spacing:-1.2px}
  .ks-step h2{font-size:21px}
  .ks-date-day{font-size:28px}
  .ks-akt .btn{flex:1 1 100%}
}

.ks-err{font-size:14px;font-weight:600;line-height:1.5;background:var(--orange-soft);border:var(--bd);border-radius:var(--r);padding:10px 12px;margin-top:18px;text-align:left}
.ks-err[hidden]{display:none}