/*
 * Fallback-Variablen (überschreibbar durch Theme-Variablen wie --wf-gelb, --wf-dunkel).
 * So bleibt das Plugin auf jeder Site lauffähig, übernimmt aber automatisch
 * die werkform-Palette, wenn diese CSS-Variablen bereits existieren.
 */
.wpsc-root {
	--wpsc-accent: var(--wf-gelb, #f5c518);
	--wpsc-dark: var(--wf-dunkel, #1a1a1a);
	--wpsc-text: var(--text, #555);
	--wpsc-surface: var(--surface-ai, #eee);
	--wpsc-white: var(--weiss, #fff);
	box-sizing: border-box;
	max-width: 680px;
	margin: 0 auto;
	color: var(--wpsc-dark);
}
.wpsc-root *{ box-sizing: border-box; }
.wpsc-sub { color: var(--wpsc-text); margin: 0 0 2.5rem; }

.wpsc-progress { display: flex; gap: 8px; margin-bottom: 2rem; }
.wpsc-progress-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wpsc-surface); transition: background .25s; }
.wpsc-progress-dot.done { background: var(--wpsc-accent); }
.wpsc-progress-dot.active { background: var(--wpsc-dark); }

.wpsc-question { font-weight: 600; margin-bottom: .5rem; line-height: 1.4; }
.wpsc-hint { font-size: .85em; color: var(--wpsc-text); margin-bottom: 1.5rem; }

.wpsc-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1rem; }
.wpsc-opt {
	background: var(--wpsc-white);
	border: 1.5px solid var(--wpsc-surface);
	border-radius: 8px;
	padding: 1.2rem 1.6rem;
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition: border-color .15s, background .15s, color .15s;
}
.wpsc-opt:hover { border-color: var(--wpsc-dark); background: var(--wpsc-dark); color: var(--wpsc-white); }

.wpsc-back, .wpsc-restart {
	background: none; border: none; box-shadow: none;
	font-size: .85em; color: var(--wpsc-text); cursor: pointer;
	padding: 1rem 0; margin-top: .5rem;
}
.wpsc-back:hover, .wpsc-restart:hover { color: var(--wpsc-dark); }

.wpsc-result-badge {
	display: inline-block; font-size: .7em; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 1rem;
}
.wpsc-badge-self { background: var(--wpsc-surface); color: var(--wpsc-dark); }
.wpsc-badge-coach { background: var(--wpsc-accent); color: #000; }

.wpsc-tool-badges { margin-bottom: 1rem; }
.wpsc-tool-badge {
	display: inline-flex; align-items: center; gap: 6px; font-size: .7em; font-weight: 600;
	padding: 3px 10px; border-radius: 20px; margin: 0 4px 6px 0; background: var(--wpsc-surface);
}

.wpsc-cta-group { display: flex; flex-direction: column; gap: 10px; }
.wpsc-cta { display: block; padding: .8rem 1.5rem; border-radius: 8px; text-decoration: none; text-align: center; font-weight: 500; }
.wpsc-cta-primary { background: var(--wpsc-accent); color: #000; }
.wpsc-cta-primary:hover { background: var(--wpsc-dark); color: var(--wpsc-white); }
.wpsc-cta-secondary { background: var(--wpsc-white); color: var(--wpsc-dark); border: 1.5px solid var(--wpsc-surface); }
.wpsc-cta-secondary:hover { border-color: var(--wpsc-dark); }