/* Griffig – Lernstatus (Modus „Lerninhalte“): Bestätigungsdialog + Fehlerhinweis
 * CI: Gold #dcae45 · Beige #f0e8df · Sage #a9b29a · Moss #738d60 · Tinte #1f1a0e
 * Schrift: erbt vom Theme (kein Font-Embedding).
 * Die Button-Selektoren sind bewusst spezifischer als Theme-Resets
 * (z. B. Hello Elementor `[type=button]:hover/:focus`), ohne !important. */

html.griffig-ls-modal-open {
	overflow: hidden;
}

.griffig-ls-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.griffig-ls-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 31, 26, 14, 0.45 );
}

.griffig-ls-modal__dialog {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	padding: 24px;
	background: #ffffff;
	color: #1f1a0e;
	border-top: 4px solid #dcae45;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba( 31, 26, 14, 0.2 );
	font: inherit;
}

.griffig-ls-modal .griffig-ls-modal__title {
	margin: 0 0 8px;
	color: #1f1a0e;
	font-family: inherit;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1.3;
}

.griffig-ls-modal .griffig-ls-modal__text {
	margin: 0 0 20px;
	color: #1f1a0e;
	line-height: 1.5;
}

.griffig-ls-modal__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

.griffig-ls-modal .griffig-ls-modal__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 9999px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.griffig-ls-modal .griffig-ls-modal__btn.griffig-ls-modal__btn--cancel,
.griffig-ls-modal .griffig-ls-modal__btn.griffig-ls-modal__btn--cancel:focus {
	background: #f0e8df;
	border-color: #f0e8df;
	color: #1f1a0e;
}

.griffig-ls-modal .griffig-ls-modal__btn.griffig-ls-modal__btn--cancel:hover,
.griffig-ls-modal .griffig-ls-modal__btn.griffig-ls-modal__btn--cancel:active {
	background: #e5dace;
	border-color: #a9b29a;
	color: #1f1a0e;
}

.griffig-ls-modal .griffig-ls-modal__btn.griffig-ls-modal__btn--confirm,
.griffig-ls-modal .griffig-ls-modal__btn.griffig-ls-modal__btn--confirm:focus {
	background: #dcae45;
	border-color: #dcae45;
	color: #1f1a0e;
}

.griffig-ls-modal .griffig-ls-modal__btn.griffig-ls-modal__btn--confirm:hover,
.griffig-ls-modal .griffig-ls-modal__btn.griffig-ls-modal__btn--confirm:active {
	background: #cf9f35;
	border-color: #cf9f35;
	color: #1f1a0e;
}

.griffig-ls-modal .griffig-ls-modal__btn:focus-visible {
	outline: 2px solid #738d60;
	outline-offset: 2px;
}

@media ( max-width: 420px ) {
	.griffig-ls-modal__actions {
		flex-direction: column-reverse;
	}
	.griffig-ls-modal .griffig-ls-modal__btn {
		width: 100%;
	}
}

/* Fehlerhinweis unter Karte / Einzel-Status */
.griffig-ls-error {
	width: 100%;
	margin: 6px 0 0;
	padding: 6px 10px;
	border-left: 3px solid #dcae45;
	background: #f0e8df;
	color: #1f1a0e;
	font-size: 0.85em;
	line-height: 1.4;
}

.griffig-ls-error[hidden] {
	display: none;
}

/* Einzel-Status im Lernmodus: Schutz gegen Theme-Button-Styles.
 * Hello Elementor (reset.css) setzt global `[type=button], button` auf
 * border/color #c36 und bei :hover/:focus background #c36. Ohne eigene
 * Border-Einstellung im Widget gewinnt dann je nach Ladereihenfolge die pinke
 * Border. Die Selektoren hier sind spezifischer als die Theme-Regeln (max.
 * 0,2,0), aber weniger spezifisch als die Elementor-Stil-Controls des Widgets
 * (.elementor-X .elementor-element-Y …) – eigene Widget-Styles gewinnen also
 * weiterhin. Nur Lernmodus (--learning), Stücke-Modus unberührt. */
.griffig-single-status--learning .griffig-single-status__btn,
.griffig-single-status--learning .griffig-single-status__btn:hover,
.griffig-single-status--learning .griffig-single-status__btn:focus,
.griffig-single-status--learning .griffig-single-status__btn:focus-visible,
.griffig-single-status--learning .griffig-single-status__btn:active {
	background-color: #f0e8df;
	border: 1px solid #a9b29a;
	color: #1f1a0e;
	text-decoration: none;
	box-shadow: none;
}

.griffig-single-status--learning .griffig-single-status__btn:hover:not( .is-active ):not( :disabled ) {
	background-color: #e5dace;
	border-color: #738d60;
}

.griffig-single-status--learning .griffig-single-status__btn:active:not( .is-active ):not( :disabled ) {
	background-color: #dcae45;
	border-color: #dcae45;
}

.griffig-single-status--learning .griffig-single-status__btn:focus:not( :focus-visible ) {
	outline: none;
}

.griffig-single-status--learning .griffig-single-status__btn:focus-visible {
	outline: 2px solid #738d60;
	outline-offset: 2px;
}

/* Aktiver Status: bestehende dunkle Darstellung, in allen Zuständen stabil */
.griffig-single-status--learning .griffig-single-status__btn.is-active,
.griffig-single-status--learning .griffig-single-status__btn.is-active:hover,
.griffig-single-status--learning .griffig-single-status__btn.is-active:focus,
.griffig-single-status--learning .griffig-single-status__btn.is-active:focus-visible,
.griffig-single-status--learning .griffig-single-status__btn.is-active:active {
	background-color: #1a1a1a;
	border-color: #1a1a1a;
	color: #ffffff;
}

/* Einzel-Status im Lernmodus: Tablet/Mobile linksbündig.
 * Das Widget-Control „Ausrichtung“ (alignment → justify-content) ist nicht
 * responsiv; live steht es auf „Rechts“ (flex-end) für die Desktop-Zeile
 * „Titel links · Status rechts“. Ab dem Elementor-Tablet-Breakpoint (≤ 1024px,
 * schließt Mobile ≤ 767px ein) stapelt der Container Titel und Status – dann
 * sollen die Buttons links beginnen, auch in umbrochenen Zeilen.
 * Spezifität (0,5,0) > Control-Regel `.elementor-X .elementor-element.elementor-element-Y
 * .griffig-single-status` (0,4,0); Desktop, Stücke-Modus und andere Widgets unberührt. */
@media ( max-width: 1024px ) {
	.elementor .elementor-element.elementor-widget-griffig_single_status .griffig-single-status.griffig-single-status--learning {
		justify-content: flex-start;
		flex-wrap: wrap;
	}
}

/* Einzel-Status: nicht änderbar (kein Schreibrecht) */
.griffig-single-status--learning .griffig-single-status__btn:disabled {
	cursor: default;
	opacity: 0.6;
}