/* =====================================================================
   KONTO — KONTO LÖSCHEN
   Gehört zu includes/class-spf-konto-loeschen.php.

   Farben ausschließlich über die Konto-Token aus spf-account.css; der
   Nachtmodus setzt diese Token um (html.spf-night, NIE prefers-color-scheme).

   Selektoren mit .spfkl davor: Der allgemeine Konto-Block färbt jeden Knopf
   im .wcwrap orange — eine Klasse mehr gewinnt.

   Kontrast, nachgerechnet am 12.10.2026:
     Gefahrknopf Tag    #fff auf --out #da2d23        4,8:1
     Gefahrknopf Nacht  #101112 auf --out #e5615a     5,5:1  (Weiß hätte nur 3,4:1)
   ===================================================================== */

.psk-konto .wcwrap .spfkl{ display:block; max-width:720px; }
.psk-konto .wcwrap .spfkl-titel{
	margin:0 0 14px; font-family:var(--cond); font-weight:600; font-size:18px;
	text-transform:uppercase; letter-spacing:.03em; line-height:1.2; color:var(--ink);
}
.psk-konto .wcwrap .spfkl-text{ margin:0 0 14px; font-size:15px; line-height:1.55; color:var(--ink); }
.psk-konto .wcwrap .spfkl-klein{ margin:12px 0 0; font-size:13.5px; line-height:1.5; color:var(--muted); }

/* ---------- Was gelöscht wird, was bleibt ---------- */
.psk-konto .wcwrap .spfkl-karten{
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 16px;
}
.psk-konto .wcwrap .spfkl-karte{
	background:var(--card); border:1px solid var(--line-strong); border-radius:var(--radius);
	padding:15px 16px 13px;
}
.psk-konto .wcwrap .spfkl-karte h3{
	margin:0 0 8px; font-family:var(--cond); font-weight:600; font-size:14px;
	text-transform:uppercase; letter-spacing:.04em; color:var(--ink);
}
.psk-konto .wcwrap .spfkl-karte ul,
.psk-konto .wcwrap .spfkl-liste{ margin:0; padding:0 0 0 18px; font-size:14.5px; line-height:1.55; color:var(--ink); }
.psk-konto .wcwrap .spfkl-karte li + li,
.psk-konto .wcwrap .spfkl-liste li + li{ margin-top:4px; }
.psk-konto .wcwrap .spfkl-liste{ margin:0 0 14px; }

/* ---------- Knöpfe ---------- */
.psk-konto .wcwrap .spfkl-knoepfe{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.psk-konto .wcwrap .spfkl .spfkl-btn{
	display:inline-flex; align-items:center; justify-content:center;
	min-height:44px; box-sizing:border-box;
	border:1px solid transparent; border-radius:9px;
	background:var(--orange); color:var(--spf-brand-ink-auto,#101112); text-decoration:none;
	font-family:var(--cond); font-weight:600; font-size:13px; line-height:1.2;
	text-transform:uppercase; letter-spacing:.04em;
	padding:10px 16px; cursor:pointer; touch-action:manipulation;
}
@media (hover:hover){
.psk-konto .wcwrap .spfkl .spfkl-btn:hover{ background:var(--orange-press); color:var(--spf-brand-ink-auto,#101112); text-decoration:none; }}
.psk-konto .wcwrap .spfkl .spfkl-btn--gefahr{ background:var(--out); color:#fff; }
@media (hover:hover){
.psk-konto .wcwrap .spfkl .spfkl-btn--gefahr:hover{ background:var(--out); color:#fff; filter:brightness(.92); }}
.psk-konto .wcwrap .spfkl .spfkl-btn--geist{ background:transparent; border-color:var(--border); color:var(--ink); }
@media (hover:hover){
.psk-konto .wcwrap .spfkl .spfkl-btn--geist:hover{ background:transparent; border-color:var(--orange-text,var(--orange)); color:var(--orange-text,var(--orange)); }}
.psk-konto .wcwrap .spfkl .spfkl-btn:focus-visible{ outline:2px solid var(--orange-text,var(--orange)); outline-offset:2px; }
.psk-konto .wcwrap .spfkl .spfkl-btn--gefahr:focus-visible{ outline-color:var(--out); }
.psk-konto .wcwrap .spfkl .spfkl-btn[disabled]{ opacity:.6; cursor:progress; filter:none; }

html.spf-night .psk-konto .wcwrap .spfkl .spfkl-btn--gefahr,
html.spf-night .psk-konto .wcwrap .spfkl .spfkl-btn--gefahr:hover{ color:#101112; }

/* ---------- Hinweise ---------- */
.psk-konto .spfkl-hinweis{
	margin:0 0 16px; padding:11px 14px; font-size:14.5px; line-height:1.5;
	background:var(--hover); border:1px solid var(--line); border-left:3px solid var(--muted);
	border-radius:9px; color:var(--ink);
}
.psk-konto .spfkl-hinweis--ok{ border-left-color:var(--ok); }
.psk-konto .spfkl-hinweis--info{ border-left-color:var(--orange-text,var(--orange)); }
.psk-konto .spfkl-hinweis--warn{ border-left-color:var(--out); }
.psk-konto .wcwrap .spfkl-zurueck{ margin:4px 0 0; font-size:14px; }

/* ---------- Abschnitt auf den Kontodetails ---------- */
.psk-konto .wcwrap .spfkl-teaser{
	margin:28px 0 0; padding:18px 0 0; border-top:1px solid var(--line);
}
.psk-konto .wcwrap .spfkl-teaser h2{
	margin:0 0 6px; font-family:var(--cond); font-weight:600; font-size:15px;
	text-transform:uppercase; letter-spacing:.03em; color:var(--ink);
}
.psk-konto .wcwrap .spfkl-teaser p{ margin:0 0 8px; font-size:14px; line-height:1.5; color:var(--muted); }
.psk-konto .wcwrap .spfkl-teaser .spfkl-link{
	display:inline-flex; align-items:center; min-height:44px;
	font-family:var(--cond); font-weight:600; font-size:13px;
	text-transform:uppercase; letter-spacing:.04em; color:var(--out); text-decoration:none;
}
@media (hover:hover){
.psk-konto .wcwrap .spfkl-teaser .spfkl-link:hover{ text-decoration:underline; }}
.psk-konto .wcwrap .spfkl-teaser .spfkl-link:focus-visible{ outline:2px solid var(--out); outline-offset:2px; }

/* ---------- Mobil ---------- */
@media (max-width:640px){
	.psk-konto .wcwrap .spfkl-karten{ grid-template-columns:1fr; }
	.psk-konto .wcwrap .spfkl-knoepfe{ flex-direction:column; align-items:stretch; }
	.psk-konto .wcwrap .spfkl .spfkl-btn{ width:100%; }
	.psk-konto .wcwrap .spfkl-text,
	.psk-konto .wcwrap .spfkl-karte ul,
	.psk-konto .spfkl-hinweis{ font-size:16px; }
}