/* rex-com.de/kuendigen/ – Online-Kündigung (§ 312k BGB). Ergänzt style.css. */
.kd { --kd-card: #FFFFFF; --kd-ok: #15803D; --kd-ok-bg: #DCFCE7; --kd-err: #B91C1C; --kd-err-bg: #FEE2E2; }
@media (prefers-color-scheme: dark) {
    .kd { --ink: #F1F5F9; --kd-card: #0F1829; --kd-ok: #4ADE80; --kd-ok-bg: #0F2E1C; --kd-err: #FCA5A5; --kd-err-bg: #3B1111; }
}
.kd :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.kd h1 { margin-bottom: 14px; }
.kd-lead { font-size: 1.08rem; margin-bottom: 22px; }
.kd-error { margin: 0 0 18px; padding: 13px 16px; border-radius: 12px; background: var(--kd-err-bg); color: var(--kd-err); font-weight: 700; }
.kd-form { display: grid; gap: 18px; }
.kd-form fieldset { border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 6px; background: var(--kd-card); display: grid; gap: 14px; min-width: 0; }
.kd-form legend { padding: 0 6px; font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.kd .field { margin-bottom: 12px; }
.kd .field label { color: var(--ink); }
.kd-req, .kd-opt { font-weight: 500; color: var(--muted); font-size: 0.85rem; }
.kd-hint { margin: 0; font-size: 0.92rem; }
/* BF5 (29.09.2026): Feldrand ≥ 3:1 zur Fläche (WCAG 1.4.11) – wie im Kundenportal; Fokus und Fehler bleiben */
.kd .field input:not(:focus), .kd .field select:not(:focus), .kd .field textarea:not(:focus) { border-color: #8190A5; }
@media (prefers-color-scheme: dark) {
    .kd .field input:not(:focus), .kd .field select:not(:focus), .kd .field textarea:not(:focus) { border-color: #5B6B82; }
}
.kd .field input[aria-invalid="true"] { border-color: var(--kd-err); }
.kd-radio { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--text); }
.kd-radio:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.kd-radio input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; accent-color: var(--brand); }
.kd-radio strong { color: var(--ink); }
.kd-radio small { display: block; color: var(--muted); font-size: 0.86rem; }
.kd-date input { max-width: 240px; }
/* Fokus auch sichtbar, wenn er im Kalender-Knopf des Datumsfelds steht (Shadow DOM) */
.kd .field input[type="date"]:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }
.kd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kd-submit { width: 100%; min-height: 56px; font-size: 1.1rem; }
.kd-small { font-size: 0.9rem; }
.kd .btn { min-height: 48px; }

/* Bestätigung */
.kd-done { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.kd-done h1 { margin-bottom: 6px; }
.kd-done-ico { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--kd-ok-bg); color: var(--kd-ok); font-size: 1.8rem; font-weight: 800; }
.kd-received { font-size: 1.05rem; margin: 0; }
.kd-received strong { color: var(--ink); }
.kd-end { padding: 14px 16px; border-radius: 12px; background: var(--kd-ok-bg); color: var(--kd-ok) !important; font-weight: 700; }
.kd-receipt { margin: 18px 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--kd-card); }
.kd .kd-receipt h2 { font-size: 1.15rem; margin: 0 0 12px; }
.kd-dl { display: grid; gap: 10px; }
.kd-dl div { display: grid; gap: 2px; }
.kd-dl dt { font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.kd-dl dd { color: var(--ink); overflow-wrap: anywhere; }
.kd-sum { margin-top: 14px; font-size: 0.82rem; overflow-wrap: anywhere; }
.kd-sum code { font-size: 0.78rem; }
.kd-firm { font-size: 0.85rem; }
.kd-actions { margin: 16px 0 10px; }
@media (min-width: 700px) {
    .kd-form fieldset { padding: 22px 24px 8px; }
    .kd-dl div { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
    .kd-submit { width: auto; padding-left: 40px; padding-right: 40px; }
}
@media print {
    .cmd, .qj, .cmd-scrim, .foot, .kd-actions, .kd-small { display: none !important; }
    main.legal { padding-top: 0; }
    .kd-receipt, .kd-end { border: 1px solid #999; background: #fff; color: #000 !important; }
}