/*
 * ESP-Webflasher - Gestaltung.
 *
 * Es werden ausschliesslich die Farb- und Schriftvariablen des Child-Themes
 * benutzt. Dadurch stimmt die Darstellung auch im Dunkelmodus, ohne dass hier
 * irgendein Farbwert fest eingetragen ist.
 */

.akm-flasher {
	font-family: var( --wp--preset--font-family--geist );
	color: var( --wp--preset--color--ink );
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 46rem;
}

.akm-flasher__titel {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* --- Meldungskaesten ---------------------------------------------------- */

.akm-flasher__alarm {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.akm-flasher__alarm[hidden] {
	display: none;
}

.akm-flasher__kasten {
	border: 1px solid var( --wp--preset--color--line );
	border-left-width: 4px;
	background-color: var( --wp--preset--color--surface );
	padding: 1rem 1.125rem;
	border-radius: 6px;
}

.akm-flasher__kasten--warnung {
	border-left-color: var( --wp--preset--color--accent-strong );
	background-color: color-mix( in oklch, var( --wp--preset--color--accent ) 10%, var( --wp--preset--color--surface ) );
}

.akm-flasher__kasten--info {
	border-left-color: var( --wp--preset--color--accent );
	background-color: var( --wp--preset--color--sand );
}

.akm-flasher__kasten--admin {
	border-left-color: var( --wp--preset--color--muted );
	background-color: var( --wp--preset--color--surface-2 );
	font-family: var( --wp--preset--font-family--geist-mono );
	font-size: 0.85rem;
}

.akm-flasher__kasten-titel {
	margin: 0;
	font-weight: 600;
}

.akm-flasher__kasten-text {
	margin: 0.4rem 0 0;
	color: var( --wp--preset--color--muted );
}

/* --- Die Hinweise vorab ------------------------------------------------- */

.akm-flasher__vorab {
	border: 1px solid var( --wp--preset--color--line );
	background-color: var( --wp--preset--color--surface );
	padding: 1.25rem 1.5rem;
	border-radius: 6px;
}

.akm-flasher__vorab-titel {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

.akm-flasher__vorab-liste {
	margin: 0;
	padding-left: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.akm-flasher__vorab-liste li {
	line-height: 1.55;
}

.akm-flasher__vorab-liste strong {
	display: block;
}

.akm-flasher__vorab-liste span {
	color: var( --wp--preset--color--muted );
}

/* --- Auswahl ------------------------------------------------------------ */

.akm-flasher__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.akm-flasher__select {
	width: 100%;
	min-height: 2.9rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var( --wp--preset--color--input-border );
	border-radius: 6px;
	background-color: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
	font-family: inherit;
	font-size: 1rem;
}

.akm-flasher__select:focus-visible {
	outline: 2px solid var( --wp--preset--color--focus );
	outline-offset: 2px;
}

.akm-flasher__select[disabled] {
	color: var( --wp--preset--color--muted );
}

.akm-flasher__hilfe {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	color: var( --wp--preset--color--muted );
}

/* --- Beschreibung der gewaehlten Firmware ------------------------------- */

.akm-flasher__detail {
	border: 1px solid var( --wp--preset--color--line );
	background-color: var( --wp--preset--color--paper );
	padding: 1rem 1.25rem;
	border-radius: 6px;
}

.akm-flasher__detail[hidden] {
	display: none;
}

.akm-flasher__detail-name {
	margin: 0;
	font-weight: 600;
}

.akm-flasher__detail-text {
	margin: 0.4rem 0 0;
	color: var( --wp--preset--color--muted );
}

.akm-flasher__detail-daten {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.9rem;
	color: var( --wp--preset--color--muted );
}

.akm-flasher__detail-daten span {
	display: inline-block;
	min-width: 8.5rem;
	font-family: var( --wp--preset--font-family--geist-mono );
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--ink );
}

/* --- Knopf -------------------------------------------------------------- */

.akm-flasher__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.9rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid var( --wp--preset--color--accent-strong );
	border-radius: 6px;
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent-text );
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.akm-flasher__button:hover {
	background-color: var( --wp--preset--color--accent-strong );
}

.akm-flasher__button:focus-visible {
	outline: 2px solid var( --wp--preset--color--focus );
	outline-offset: 2px;
}

.akm-flasher__slot-text {
	margin: 0;
	color: var( --wp--preset--color--muted );
	font-size: 0.9rem;
}

/* --- Schritte und Hilfe ------------------------------------------------- */

.akm-flasher__schritte {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media ( min-width: 44rem ) {
	.akm-flasher__schritte {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.akm-flasher__schritte li {
	border-top: 1px solid var( --wp--preset--color--line );
	padding-top: 0.75rem;
}

.akm-flasher__schritte strong {
	display: block;
	font-family: var( --wp--preset--font-family--geist-mono );
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --wp--preset--color--muted );
	margin-bottom: 0.35rem;
}

.akm-flasher__schritte span {
	font-size: 0.95rem;
	line-height: 1.5;
}

.akm-flasher__faq {
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 6px;
	background-color: var( --wp--preset--color--surface-2 );
	padding: 0.9rem 1.125rem;
}

.akm-flasher__faq summary {
	cursor: pointer;
	font-weight: 600;
}

.akm-flasher__faq ul {
	margin: 0.9rem 0 0;
	padding-left: 1.15rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	color: var( --wp--preset--color--muted );
	line-height: 1.55;
}

.akm-flasher-hinweis {
	color: var( --wp--preset--color--muted );
}