/* Schnelles Self-Assessment – Fokus Empathie */
.feqa {
	--feqa-cream: #fefced;
	--feqa-light: #fdf8cb;
	--feqa-gold: #d9c476;
	--feqa-gold-deep: #b09e59;
	--feqa-terra: #a45137;
	--feqa-dark: #943f25;
	--feqa-ink: #222423;
	--feqa-line: rgba(217, 196, 118, .45);

	/* Textfarbe auf dem Seitenhintergrund (dunkler Hintergrund → helles Gold).
	   Eine Änderung hier färbt Einleitung, Aussagen und Zähler gemeinsam um. */
	--feqa-text: #d9c476;

	max-width: 820px;
	margin: 0 auto;
	color: var(--feqa-text);
	line-height: 1.5;
}

.feqa-title {
	margin: 0 0 .8rem;
	color: var(--feqa-gold);
	font-size: 3rem;
	line-height: 1.15;
}
.feqa-intro { padding-bottom: 1rem; border-bottom: 2px solid var(--feqa-gold); margin-bottom: 1.6rem; }
.feqa-intro p { margin: 0 0 1rem; font-size: 2.1rem; color: var(--feqa-text); line-height: 1.4; }

.feqa-q {
	padding: 1.4rem 0;
	border-top: 1px solid var(--feqa-line);
}
.feqa-q:first-child { border-top: none; }
.feqa-q-text {
	margin: 0 0 1rem;
	color: var(--feqa-text);
	font-size: 2.6rem;
	font-weight: 500;
	line-height: 1.3;
}
.feqa-scale {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .6rem;
}
.feqa-pill {
	padding: .8rem .5rem;
	border: 1px solid var(--feqa-gold-deep);
	border-radius: 10px;
	background: #fff;
	color: var(--feqa-dark);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background .12s ease, color .12s ease;
}
.feqa-pill:hover { background: var(--feqa-light); }
.feqa-pill.is-selected { background: var(--feqa-terra); border-color: var(--feqa-terra); color: #fff; }

.feqa-q.is-missing { background: rgba(164, 81, 55, .16); border-radius: 10px; }
.feqa-q.is-missing .feqa-q-text { padding-left: .6rem; }

.feqa-hint {
	margin: 1.2rem 0 0;
	padding: .8rem 1rem;
	border-radius: 10px;
	background: var(--feqa-light);
	color: var(--feqa-dark);
	font-size: 1.5rem;
	font-weight: 600;
}

.feqa-actions {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-top: 1.8rem;
	padding-top: 1.4rem;
	border-top: 2px solid var(--feqa-gold);
}
.feqa-btn {
	display: inline-block;
	padding: .9rem 1.6rem;
	border: 1px solid var(--feqa-gold-deep);
	border-radius: 10px;
	background: #fff;
	color: var(--feqa-dark);
	font-size: 1.6rem;
	font-weight: 600;
	cursor: pointer;
}
.feqa-btn-primary { background: var(--feqa-terra); border-color: var(--feqa-terra); color: #fff; }
.feqa-btn-primary:hover { background: var(--feqa-dark); }
.feqa-count { color: var(--feqa-text); font-size: 1.5rem; font-weight: 600; }
.feqa-count.is-complete { color: #fff; }

/* Ergebnis: heller Kasten – hier bleibt dunkler Text richtig. */
.feqa-result {
	padding: 1.8rem 2rem;
	border: 1px solid var(--feqa-gold);
	border-radius: 14px;
	background: var(--feqa-cream);
	color: var(--feqa-ink);
}
.feqa-result-head {
	margin: 0 0 1rem;
	color: var(--feqa-terra);
	font-size: 1.7rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.feqa-result p { margin: 0 0 1.1rem; color: var(--feqa-ink); font-size: 1.8rem; line-height: 1.45; }
.feqa-result a { color: var(--feqa-terra); font-weight: 700; }
.feqa-mismatch {
	margin: 1.4rem 0;
	padding: 1.1rem 1.3rem;
	border-left: 5px solid var(--feqa-gold-deep);
	background: var(--feqa-light);
}
.feqa-mismatch p { margin: 0; font-size: 1.6rem; }
.feqa-privacy {
	margin: 1.4rem 0 1.2rem;
	color: #6b6d68;
	font-size: 1.3rem;
	font-style: italic;
}

@media (max-width: 620px) {
	.feqa-title { font-size: 2.3rem; }
	.feqa-intro p { font-size: 1.7rem; }
	.feqa-q-text { font-size: 2.1rem; }
	/* Zwei Spalten, damit die Beschriftungen bei grosser Schrift nicht brechen. */
	.feqa-scale { grid-template-columns: repeat(2, 1fr); }
	.feqa-pill { font-size: 1.3rem; padding: .8rem .4rem; }
	.feqa-hint { font-size: 1.3rem; }
	.feqa-btn { font-size: 1.4rem; width: 100%; }
	.feqa-count { font-size: 1.3rem; }
	.feqa-actions { flex-direction: column; align-items: stretch; text-align: center; }
	.feqa-result { padding: 1.2rem 1.1rem; }
	.feqa-result p { font-size: 1.5rem; }
	.feqa-mismatch p { font-size: 1.35rem; }
}

/* Formular für den Versand des vollständigen Ergebnisses */
.feqa-lead {
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 2px solid var(--feqa-gold-deep);
}
.feqa-lead-head {
	margin: 0 0 .6rem;
	color: var(--feqa-terra);
	font-size: 1.9rem;
	line-height: 1.25;
}
.feqa-lead p { font-size: 1.5rem; margin: 0 0 1rem; }
.feqa-field { margin: 0 0 1rem; }
.feqa-field label {
	display: block;
	margin-bottom: .3rem;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--feqa-dark);
}
.feqa-field input {
	width: 100%;
	box-sizing: border-box;
	padding: .8rem .9rem;
	border: 1px solid var(--feqa-gold-deep);
	border-radius: 10px;
	background: #fff;
	color: var(--feqa-ink);
	font-size: 1.5rem;
	line-height: 1.3;
}
.feqa-field input:focus { outline: 3px solid rgba(164,81,55,.35); outline-offset: 1px; }
.feqa-consent {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	margin: 0 0 1.2rem;
	cursor: pointer;
}
.feqa-consent input { margin-top: .45rem; width: 1.3rem; height: 1.3rem; flex: 0 0 auto; }
.feqa-consent p { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.feqa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feqa-error {
	margin: 0 0 1rem;
	padding: .8rem 1rem;
	border-radius: 10px;
	background: #f7d9d0;
	color: #7d3520;
	font-size: 1.3rem;
	font-weight: 600;
}
.feqa-success {
	margin: 1.4rem 0;
	padding: 1rem 1.2rem;
	border-left: 5px solid var(--feqa-terra);
	background: #fff;
	color: var(--feqa-ink);
	font-size: 1.5rem;
	font-weight: 600;
}

@media (max-width: 620px) {
	.feqa-lead-head { font-size: 1.6rem; }
	.feqa-lead p { font-size: 1.35rem; }
	.feqa-field input { font-size: 1.35rem; }
	.feqa-consent p { font-size: 1.15rem; }
	.feqa-success { font-size: 1.3rem; }
}