/* Konto löschen (/konto-loeschen) – ergänzt landing.v1.css (Farben, Schriften, Kopf/Fuß, .card/.sub-*).
   Nur Variablen aus landing.v1.css (hell + dunkel dort). Keine Inline-Styles (CSP style-src 'self'). */

.k-lead { max-width: 720px; }
.k-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.k-grid .sub-card { margin-top: 24px; }
.k-card { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.k-card .sub-h { margin: 0; }

.k-text { font-size: 17px; line-height: 1.55; color: var(--muted); }
.k-text b, .k-list b, .k-steps b { color: var(--ink); }
.k-small { font-size: 14px; line-height: 1.5; color: var(--muted); }
.k-center { text-align: center; }
.k-foot { margin-top: 24px; }
.k-small a, .k-text a { color: var(--ink); font-weight: 700; }

/* In der App: nummerierte Schritte */
.k-steps { display: flex; flex-direction: column; gap: 12px; }
.k-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.5; color: var(--muted); }
.k-num {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; height: 28px; margin-top: -1px;
  border-radius: 999px; background: var(--amber-tint); color: var(--ink); font-weight: 800; font-size: 14px;
}

/* Was gelöscht wird / was bleibt */
.k-list { display: flex; flex-direction: column; gap: 10px; }
.k-list li { position: relative; padding-left: 20px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.k-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.66em; width: 7px; height: 7px; border-radius: 999px; background: var(--amber);
}

/* Ohne App: Formular und Zustände */
.k-app { display: flex; flex-direction: column; gap: 14px; }
.k-form { display: flex; flex-direction: column; gap: 10px; }
.k-label { font-size: 14px; font-weight: 800; color: var(--ink); }
.k-field {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 16px; border: 1.5px solid var(--line);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 17px;
}
.k-field::placeholder { color: var(--muted); opacity: 0.8; }
.k-field:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 16px; }

.k-btn { width: 100%; min-height: 50px; font-size: 16px; border: 0; cursor: pointer; font-family: inherit; }
.k-btn:disabled { opacity: 0.6; cursor: default; }
.k-btn-danger {
  display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 999px;
  background: #B4502F; color: #FFFFFF; font-weight: 800; /* coral-strong (hell): Kontrast zu Weiß ≥ 4.5:1, auch im Dunklen */
}
.k-btn-danger:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.k-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.k-link {
  align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 800; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.k-small .k-link, .k-link.k-small { min-height: 0; padding: 0; font-size: 14px; align-self: auto; }
.k-link.k-small { align-self: flex-start; min-height: 44px; }

.k-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); }
.k-box ul { display: flex; flex-direction: column; gap: 10px; }
.k-box-danger { background: var(--coral-tint); border-color: transparent; }
.k-line { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: var(--ink); }
.k-ico { stroke: var(--muted); margin-top: 1px; }
.k-danger .k-ico { stroke: var(--coral-strong); }
.k-box-danger .k-line { color: var(--coral-ink); }

.k-status { display: flex; gap: 12px; align-items: flex-start; }
.k-status > .k-ico { width: 28px; height: 28px; padding: 5px; border-radius: 999px; background: var(--amber-tint); stroke: var(--ink); flex: 0 0 28px; box-sizing: content-box; }
.k-status-ok > .k-ico { background: var(--sage-tint); stroke: var(--sage-dark); }
.k-status > div { display: flex; flex-direction: column; gap: 6px; }
.k-status-title { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "opsz" 72; font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--ink); }
.k-status-title:focus { outline: none; }

.k-note { padding: 12px 14px; border-radius: 14px; background: var(--amber-tint); color: var(--ink); font-size: 15px; line-height: 1.45; }
.k-note-error { background: var(--coral-tint); color: var(--coral-ink); }

.k-loading { display: flex; align-items: center; gap: 10px; min-height: 50px; font-size: 16px; color: var(--muted); }
.k-spinner { width: 20px; height: 20px; border-radius: 999px; border: 2.5px solid var(--line); border-top-color: var(--amber); }
@media (prefers-reduced-motion: no-preference) {
  .k-spinner { animation: k-spin 0.9s linear infinite; }
}
@keyframes k-spin { to { transform: rotate(360deg); } }

/* Rückfrage */
.k-sheet {
  width: min(440px, calc(100% - 32px)); padding: 24px; border: 0; border-radius: 28px;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-night); outline: 1px solid var(--line);
}
.k-sheet::backdrop { background: rgba(16, 19, 42, 0.45); }
.k-sheet[open] { display: flex; flex-direction: column; gap: 12px; }
.k-sheet-title { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "opsz" 72; font-size: 26px; line-height: 1.15; font-weight: 600; }

@media (max-width: 1023px) {
  .k-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 639px) {
  .k-text, .k-list li, .k-steps li { font-size: 16px; }
  .k-sheet { padding: 20px; }
}