/* § 312k BGB Kündigungsseiten (backend#372) — shared by /kuendigen and
   /kuendigen/bestaetigen so the two steps cannot drift apart visually.

   Two rules here are legal, not aesthetic, and must survive any restyle:

   - `.kuendigen-btn` and `.kuendigen-submit` are ordinary, full-contrast
     controls sitting directly in the flow. § 312k Abs. 2 requires the
     Kündigungsbutton to be "gut lesbar" and "ständig verfügbar" and the
     Bestätigungsschaltfläche to be reachable "unmittelbar und leicht
     zugänglich". Dimming either of them, hiding one behind a disclosure, or
     making the confirm button quieter than a neighbouring "keep my plan"
     control is exactly the dark pattern the provision outlaws.
   - The print block exists because Abs. 2 Satz 4 gives the consumer the right
     to store the declaration WITH ITS DATE AND TIME on a durable medium. The
     receipt therefore has to print cleanly on its own, without the chrome. */

/* Every class below that sets `display` outranks the UA's
   `[hidden] { display: none }` on specificity, so an element toggled with
   `el.hidden = true` stays on screen. That bit twice here — the reason box
   showing under an ORDINARY cancellation, and the whole form staying up behind
   the receipt with its button frozen on "Wird gesendet …". One rule, scoped to
   this page, rather than a per-class patch that the next new class forgets. */
.kuendigen-page [hidden] { display: none !important; }

.kuendigen-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 40px 120px;
  color: var(--text);
  font-family: var(--font-body);
  position: relative;
  z-index: 1;
}
.kuendigen-page h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 0 0 14px;
}
.kuendigen-page h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 40px 0 12px;
}
.kuendigen-page p.lede {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 32px;
}
.kuendigen-page p,
.kuendigen-page li {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.7;
}
.kuendigen-page a { color: var(--accent); text-decoration: none; }
.kuendigen-page a:hover { text-decoration: underline; }
.kuendigen-page ul { padding-left: 1.2rem; }
.kuendigen-page li { margin-bottom: 10px; }

/* ── The Kündigungsbutton itself ───────────────────────────────────────── */
.kuendigen-btn {
  display: inline-block;
  background: var(--accent);
  color: #18181b !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s ease;
}
.kuendigen-btn:hover { background: var(--accent-hover); }
.kuendigen-note {
  margin: 14px 0 0;
  font-size: 0.87rem !important;
  color: var(--text-muted) !important;
}
.kuendigen-facts { margin-top: 12px; }
.kuendigen-address {
  border-left: 2px solid var(--border);
  padding-left: 16px;
  margin: 14px 0 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.7;
}
.kuendigen-en-heading { color: var(--text-muted); }
.kuendigen-en { color: var(--text-muted) !important; font-size: 0.9rem !important; }

/* ── Bestätigungsseite: the form ───────────────────────────────────────── */
.kuendigen-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
}
.kuendigen-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kuendigen-field { display: flex; flex-direction: column; gap: 6px; }
.kuendigen-field label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.kuendigen-field .hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
}
.kuendigen-field textarea.account-input {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.kuendigen-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 0;
}
.kuendigen-fieldset legend {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0 8px;
}
.kuendigen-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 0.93rem;
  line-height: 1.5;
  cursor: pointer;
}
.kuendigen-choice:last-child { margin-bottom: 0; }
.kuendigen-choice input { margin-top: 4px; accent-color: var(--accent); }
.kuendigen-choice .sub {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 2px;
}
.kuendigen-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.kuendigen-submit {
  background: var(--accent);
  color: #18181b;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}
.kuendigen-submit:hover { background: var(--accent-hover); }
.kuendigen-submit:disabled { opacity: 0.55; cursor: not-allowed; }
.kuendigen-status { font-size: 0.88rem; min-height: 1.4em; margin: 0; }
.kuendigen-status.error { color: var(--red) !important; }

/* ── Bestätigungsseite: the receipt ────────────────────────────────────── */
.kuendigen-receipt {
  border: 1px solid var(--green);
  background: var(--green-dim);
  border-radius: var(--radius-sm);
  padding: 26px 28px;
  margin-top: 8px;
}
/* Full-strength text: the receipt IS the durable copy of the declaration, so
   it does not get the muted body colour the surrounding prose uses. */
.kuendigen-receipt p { color: var(--text) !important; }
.kuendigen-receipt h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text);
}
.kuendigen-receipt dl {
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr;
  gap: 8px 20px;
  margin: 18px 0 0;
  font-size: 0.9rem;
}
/* Slightly quieter than the receipt body, but still full-contrast enough to
   print — it carries the sentence about which timestamp governs the notice. */
.kuendigen-receipt-note { font-size: 0.87rem !important; }
.kuendigen-receipt dt { color: var(--text-muted); }
.kuendigen-receipt dd { margin: 0; color: var(--text); }
.kuendigen-receipt .ref {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text);
}
.kuendigen-print {
  margin-top: 22px;
  background: transparent;
  border: 1px solid var(--border-hover);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 10px 18px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.kuendigen-print:hover { border-color: var(--text-dim); }

@media (max-width: 640px) {
  .kuendigen-page { padding: 32px 20px 80px; }
  .kuendigen-page h1 { font-size: 1.85rem; }
  .kuendigen-row { grid-template-columns: 1fr; }
  .kuendigen-receipt dl { grid-template-columns: 1fr; gap: 2px 0; }
  .kuendigen-receipt dd { margin-bottom: 10px; }
}

/* Durable medium: the receipt has to survive Ctrl-P on its own. */
@media print {
  .bg-glow, .topbar, .footer, .kuendigen-form,
  .kuendigen-print, .kuendigen-facts { display: none !important; }
  body { background: #fff !important; }
  .kuendigen-page { color: #000 !important; max-width: none; padding: 0 6mm; }
  .kuendigen-page h1, .kuendigen-page h2 { color: #000 !important; }
  .kuendigen-page p, .kuendigen-page li { color: #222 !important; }
  .kuendigen-receipt {
    border-color: #999 !important;
    background: #fff !important;
  }
  .kuendigen-receipt dt { color: #444 !important; }
  .kuendigen-receipt dd, .kuendigen-receipt .ref { color: #000 !important; }
  /* Must repeat the `!important` and must stay AFTER the screen rule: the
     `.kuendigen-receipt p` above is itself !important, so without this the
     receipt prints as white text on white paper — which defeats the durable
     medium this whole block exists for. */
  .kuendigen-receipt p { color: #000 !important; }
}