/* ==========================================================================
   LEAPS Deeskalations-Trainer
   Eigenständiges, theme-sicheres Styling. Alles unter .ldt-trainer gescoped,
   damit es nicht mit dem WordPress-Theme kollidiert.
   ========================================================================== */

.ldt-trainer {
	/* Helle Standardpalette – ruhig, vertrauenswürdig, "editorial". */
	--ldt-bg:            #f6f4ee;
	--ldt-surface:       #ffffff;
	--ldt-surface-2:     #efece3;
	--ldt-ink:           #232826;
	--ldt-ink-soft:      #5a605c;
	--ldt-ink-faint:     #8b908b;
	--ldt-border:        rgba(35, 40, 38, 0.12);
	--ldt-border-strong: rgba(35, 40, 38, 0.28);

	--ldt-accent:        #1d6b5a;   /* tiefes Teal */
	--ldt-accent-bg:     #e2f0eb;
	--ldt-accent-ink:    #0f4c3f;

	--ldt-good:          #2f7a4d;
	--ldt-good-bg:       #e6f2e8;
	--ldt-good-ink:      #1d4f31;

	--ldt-bad:           #b4402f;
	--ldt-bad-bg:        #f8e9e5;
	--ldt-bad-ink:       #7a2618;

	--ldt-warn-ink:      #8a5a12;

	--ldt-radius:        10px;
	--ldt-radius-lg:     14px;
	--ldt-serif:         Georgia, 'Iowan Old Style', 'Times New Roman', serif;
	--ldt-sans:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	max-width: 720px;
	margin: 2rem auto;
	padding: 1.5rem;
	background: var(--ldt-bg);
	border-radius: var(--ldt-radius-lg);
	border: 1px solid var(--ldt-border);
	font-family: var(--ldt-sans);
	color: var(--ldt-ink);
	font-size: 16px;
	line-height: 1.6;
	box-sizing: border-box;
}

.ldt-trainer *,
.ldt-trainer *::before,
.ldt-trainer *::after {
	box-sizing: border-box;
}

/* Dunkler Modus – respektiert die System-Einstellung des Besuchers. */
@media (prefers-color-scheme: dark) {
	.ldt-trainer {
		--ldt-bg:            #1b1e1d;
		--ldt-surface:       #242826;
		--ldt-surface-2:     #2d322f;
		--ldt-ink:           #ecefe9;
		--ldt-ink-soft:      #a9b0aa;
		--ldt-ink-faint:     #7c827c;
		--ldt-border:        rgba(236, 239, 233, 0.14);
		--ldt-border-strong: rgba(236, 239, 233, 0.32);

		--ldt-accent:        #4cbfa0;
		--ldt-accent-bg:     #1c322c;
		--ldt-accent-ink:    #9fe0cd;

		--ldt-good:          #5ec27e;
		--ldt-good-bg:       #1d3326;
		--ldt-good-ink:      #a6e0b6;

		--ldt-bad:           #e08374;
		--ldt-bad-bg:        #3a2420;
		--ldt-bad-ink:       #f0b6ab;

		--ldt-warn-ink:      #e0b15f;
	}
}

/* Screenreader-only */
.ldt-trainer .ldt-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Kopfbereich / Auswahl ---- */
.ldt-hdr {
	padding: 1.5rem;
	background: var(--ldt-surface);
	border: 1px solid var(--ldt-border);
	border-radius: var(--ldt-radius-lg);
	margin-bottom: 1.25rem;
}
.ldt-hdr h2 {
	margin: 0 0 8px;
	font-family: var(--ldt-serif);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--ldt-ink);
	letter-spacing: -0.01em;
}
.ldt-hdr p {
	margin: 0;
	font-size: 15px;
	color: var(--ldt-ink-soft);
	line-height: 1.6;
}

.ldt-scen-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
.ldt-scen-card {
	padding: 1.25rem;
	background: var(--ldt-surface);
	border: 1px solid var(--ldt-border);
	border-radius: var(--ldt-radius);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--ldt-ink);
	transition: border-color .15s ease, transform .12s ease;
}
.ldt-scen-card:hover {
	border-color: var(--ldt-accent);
	transform: translateY(-2px);
}
.ldt-scen-card h3 {
	margin: 0 0 6px;
	font-family: var(--ldt-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--ldt-ink);
}
.ldt-scen-card p {
	margin: 0;
	font-size: 14px;
	color: var(--ldt-ink-soft);
	line-height: 1.5;
}

/* ---- Fortschritts-Pills ---- */
.ldt-progress {
	display: flex;
	gap: 6px;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}
.ldt-pill {
	flex: 1 1 90px;
	padding: 9px 4px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	border-radius: var(--ldt-radius);
	background: var(--ldt-surface-2);
	color: var(--ldt-ink-faint);
}
.ldt-pill.is-active {
	background: var(--ldt-accent-bg);
	color: var(--ldt-accent-ink);
}
.ldt-pill.is-done {
	background: var(--ldt-good-bg);
	color: var(--ldt-good-ink);
}

/* ---- Schritt-Info ---- */
.ldt-step-info {
	padding: 14px 16px;
	background: var(--ldt-accent-bg);
	border-radius: var(--ldt-radius);
	margin-bottom: 1.25rem;
	font-size: 14px;
	color: var(--ldt-accent-ink);
	line-height: 1.6;
}
.ldt-step-info b { font-weight: 700; }

/* ---- Szene ---- */
.ldt-scene {
	padding: 1.25rem;
	background: var(--ldt-surface);
	border: 1px solid var(--ldt-border);
	border-radius: var(--ldt-radius-lg);
	margin-bottom: 1.25rem;
}
.ldt-scene-label {
	font-size: 11px;
	color: var(--ldt-ink-faint);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 8px;
	font-weight: 700;
}
.ldt-scene-text {
	margin: 0;
	line-height: 1.6;
	font-size: 15px;
	color: var(--ldt-ink);
}
.ldt-scene-quote {
	margin: 14px 0 0;
	padding: 14px 16px;
	background: var(--ldt-surface-2);
	border-left: 3px solid var(--ldt-accent);
	border-radius: 0 var(--ldt-radius) var(--ldt-radius) 0;
	font-family: var(--ldt-serif);
	font-size: 16px;
	line-height: 1.55;
	font-style: italic;
	color: var(--ldt-ink);
}

/* ---- Frage + Optionen ---- */
.ldt-prompt {
	margin: 0 0 .9rem;
	font-weight: 600;
	font-size: 17px;
	color: var(--ldt-ink);
}
.ldt-opts {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ldt-opt {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	background: var(--ldt-surface);
	border: 1px solid var(--ldt-border);
	border-radius: var(--ldt-radius);
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	width: 100%;
	color: var(--ldt-ink);
	transition: border-color .15s ease, background .15s ease;
}
.ldt-opt:hover:not(:disabled) {
	border-color: var(--ldt-accent);
	background: var(--ldt-surface-2);
}
.ldt-opt:disabled { cursor: default; }
.ldt-opt.is-correct {
	border-color: var(--ldt-good);
	background: var(--ldt-good-bg);
	color: var(--ldt-good-ink);
}
.ldt-opt.is-wrong {
	border-color: var(--ldt-bad);
	background: var(--ldt-bad-bg);
	color: var(--ldt-bad-ink);
}
.ldt-opt-label {
	display: inline-block;
	min-width: 20px;
	font-weight: 700;
}

/* ---- Feedback ---- */
.ldt-fb {
	padding: 1.25rem;
	border-radius: var(--ldt-radius-lg);
	margin-top: 1.25rem;
}
.ldt-fb.is-good { background: var(--ldt-good-bg); color: var(--ldt-good-ink); }
.ldt-fb.is-bad  { background: var(--ldt-bad-bg);  color: var(--ldt-bad-ink); }
.ldt-fb-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 700;
}
.ldt-fb-title svg { width: 20px; height: 20px; flex: none; }
.ldt-fb p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.ldt-fb p + p { margin-top: 12px; }
.ldt-fb b { font-weight: 700; }

/* ---- Buttons ---- */
.ldt-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}
.ldt-btn {
	background: var(--ldt-accent);
	color: #fff;
	border: none;
	padding: 11px 20px;
	border-radius: var(--ldt-radius);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: opacity .15s ease;
}
.ldt-btn:hover { opacity: .9; }
.ldt-btn-ghost {
	background: transparent;
	color: var(--ldt-ink);
	border: 1px solid var(--ldt-border-strong);
}

/* ---- Auswertung ---- */
.ldt-summary {
	text-align: center;
	padding: 2.5rem 1.5rem;
	background: var(--ldt-surface);
	border: 1px solid var(--ldt-border);
	border-radius: var(--ldt-radius-lg);
}
.ldt-summary h2 {
	margin: 0;
	font-family: var(--ldt-serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--ldt-ink);
}
.ldt-score {
	font-family: var(--ldt-serif);
	font-size: 52px;
	font-weight: 600;
	margin: 1rem 0 .5rem;
	line-height: 1;
}
.ldt-score-label {
	color: var(--ldt-ink-soft);
	font-size: 15px;
	margin-bottom: 1.75rem;
}
.ldt-sum-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

@media (max-width: 520px) {
	.ldt-trainer { padding: 1rem; margin: 1rem auto; }
	.ldt-hdr { padding: 1.25rem; }
	.ldt-pill { font-size: 11px; }
}