@charset "UTF-8";

/* Quiz-Uebersicht + Detail (angeglichen an Studien/Blog/Content-Detail) */
.file-quiz-overview {
	--quiz-accent: #203a1d;
	--quiz-border: #dde5dd;
	--quiz-muted: #5f6d5c;
	--quiz-radius: 12px;
}

.file-quiz-overview .quiz-overview-main,
.file-quiz-detail .quiz-detail-article {
	max-width: 44rem;
	margin: 0 auto;
}

.quiz-overview-intro-card {
	margin-bottom: 1.75rem;
	padding: 1.35rem 1.5rem;
	border: 1px solid var(--quiz-border);
	border-radius: var(--quiz-radius);
	background: #fff;
	box-shadow: 0 0.5rem 1.5rem rgba(32, 58, 29, 0.06);
}

.quiz-overview-intro-title {
	margin: 0 0 0.75rem;
	color: var(--quiz-accent);
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
}

.quiz-overview-intro-text {
	margin: 0 0 0.75rem;
	color: #2f3b2e;
	line-height: 1.65;
}

.quiz-overview-intro-text--last {
	margin-bottom: 0;
}

.quiz-overview-share-card {
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
	padding: 1.1rem 1.5rem;
	border: 1px solid var(--quiz-border);
	border-radius: var(--quiz-radius);
	background: #fff;
	box-shadow: 0 0.5rem 1.5rem rgba(32, 58, 29, 0.06);
}

.quiz-overview-share,
.quiz-detail-share {
	margin-top: 0;
}

.quiz-overview-list {
	margin-bottom: 0;
}

.quiz-item .quiz-teaser-card,
.quiz-item .feature-card.quiz-teaser-card {
	border: 1px solid rgba(32, 58, 29, 0.12);
}

.quiz-item .quiz-teaser-img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.quiz-item .quiz-teaser-start {
	display: table;
	box-sizing: border-box;
	align-self: center;
	margin: 1.15rem auto 0;
	padding: 0.65rem 1.5rem;
	border: 1px solid var(--secondary-color, #203a1d);
	border-radius: 25px;
	background-color: var(--secondary-color, #203a1d);
	color: #fff;
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.quiz-item .quiz-teaser-card:hover .quiz-teaser-start,
.quiz-item .quiz-teaser-card:focus-within .quiz-teaser-start {
	background-color: #2f5a28;
	border-color: #2f5a28;
	color: #fff;
	transform: translateY(-1px);
}

.quiz-overview-empty {
	color: var(--quiz-muted);
	text-align: center;
}

/* Detail: SlickQuiz in Content-Karte */
.file-quiz-detail {
	--content-detail-accent: #203a1d;
	--content-detail-accent-soft: #79ad4b;
	--content-detail-muted: #5c6b58;
	--content-detail-surface: #f8f6f1;
	--content-detail-border: rgba(32, 58, 29, 0.12);
	--content-detail-radius: 12px;
}

.file-quiz-detail .quiz-detail-shell {
	margin-top: 0.5rem;
	padding: 1.35rem 1.5rem;
	border: 1px solid var(--quiz-border);
	border-radius: var(--quiz-radius);
	background: #fff;
	box-shadow: 0 0.5rem 1.5rem rgba(32, 58, 29, 0.06);
}

.file-quiz-detail .quiz-detail-shell .quizHeader {
	text-align: center;
}

.file-quiz-detail .quiz-detail-shell .startQuiz {
	margin-top: 0.25rem;
}

.file-quiz-detail .quiz-detail-share {
	margin-top: 1.75rem;
	padding-top: 0.25rem;
}

@media (max-width: 575.98px) {
	.quiz-overview-intro-card,
	.quiz-overview-share-card,
	.file-quiz-detail .quiz-detail-shell {
		padding: 1.1rem 1.15rem;
	}
}

/* SlickQuiz: Start-Button und Fragen im Detail sichtbar steuern */
.file-quiz-detail .quiz-detail-shell .quizArea {
	min-height: 6rem;
}

.file-quiz-detail .quiz-detail-shell .quizName:empty {
	display: none;
}

.file-quiz-detail .quiz-detail-shell ol.questions {
	padding-left: 0;
}

.file-quiz-detail .quiz-detail-shell ol.questions li.question h3 {
	margin: 0 0 0.85rem;
	font-size: 1.05rem;
	line-height: 1.45;
	color: var(--content-detail-accent);
}

.file-quiz-detail .quiz-detail-shell ul.answers {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.file-quiz-detail .quiz-detail-shell ul.answers li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-bottom: 0.75rem;
}

.file-quiz-detail .quiz-detail-shell ul.answers li input[type="radio"],
.file-quiz-detail .quiz-detail-shell ul.answers li input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin: 0.3em 0 0;
	accent-color: var(--content-detail-accent, #203a1d);
}

.file-quiz-detail .quiz-detail-shell ul.answers li label {
	flex: 1 1 auto;
	display: block;
	margin: 0;
	line-height: 1.45;
	cursor: pointer;
	color: #2f3b2e;
}

/* "Antwort überprüfen" erst nach Auswahl */
.file-quiz-detail .quiz-detail-shell li.question:not(.has-answer-selected) > a.checkAnswer {
	display: none !important;
}

.file-quiz-detail .quiz-detail-shell a.checkAnswer,
.file-quiz-detail .quiz-detail-shell a.nextQuestion {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin: 1.15rem auto 0;
	padding: 0.65rem 1.5rem;
	border: 1px solid var(--secondary-color, #203a1d);
	border-radius: 25px;
	background-color: var(--secondary-color, #203a1d);
	color: #fff;
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* checkAnswer: zentrieren ohne SlickQuiz-Hide zu brechen */
.file-quiz-detail .quiz-detail-shell a.checkAnswer {
	display: table;
}

/* Weiter: nach fadeIn (display:block) wie checkAnswer als table zentrieren */
.file-quiz-detail .quiz-detail-shell a.nextQuestion {
	margin-top: 1.85rem;
	margin-left: auto;
	margin-right: auto;
}

/* jQuery fadeIn: bei <a> oft inline/inline-block/block — sofort als table mittig */
.file-quiz-detail .quiz-detail-shell a.nextQuestion[style*="display: block"],
.file-quiz-detail .quiz-detail-shell a.nextQuestion[style*="display:block"],
.file-quiz-detail .quiz-detail-shell a.nextQuestion[style*="display: inline"],
.file-quiz-detail .quiz-detail-shell a.nextQuestion[style*="display:inline"],
.file-quiz-detail .quiz-detail-shell a.nextQuestion[style*="display: inline-block"],
.file-quiz-detail .quiz-detail-shell a.nextQuestion[style*="display:inline-block"],
.file-quiz-detail .quiz-detail-shell a.nextQuestion[style*="display: table"],
.file-quiz-detail .quiz-detail-shell a.nextQuestion[style*="display:table"],
.file-quiz-detail .quiz-detail-shell a.nextQuestion.is-quiz-nav-visible {
	display: table !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.file-quiz-detail .quiz-detail-shell a.checkAnswer:hover,
.file-quiz-detail .quiz-detail-shell a.checkAnswer:focus-visible,
.file-quiz-detail .quiz-detail-shell a.nextQuestion:hover,
.file-quiz-detail .quiz-detail-shell a.nextQuestion:focus-visible {
	background-color: #2f5a28;
	border-color: #2f5a28;
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

.file-quiz-detail .quiz-detail-shell .backToQuestion {
	display: table;
	margin: 0.75rem auto 0;
}

/* Fallback: Start-Button sichtbar bis SlickQuiz initialisiert */
.file-quiz-detail #slickQuiz.slickquiz-is-loading .startQuiz {
	display: inline-block !important;
	visibility: visible;
}

/* Falsche Antwort: Label und richtige Antwort getrennt (nicht in einer Zeile) */
.file-quiz-detail .quiz-detail-shell ul.responses li.incorrect p .quiz-correct-label,
.file-quiz-detail .quiz-detail-shell ul.responses li.incorrect p .quiz-correct-answer {
	display: block;
	margin-top: 0.35rem;
	font-weight: normal;
	font-size: inherit;
	color: inherit;
	line-height: 1.45;
}

.file-quiz-detail .quiz-detail-shell ul.responses li.incorrect p .quiz-correct-answer {
	font-style: italic;
}