/**
 * Darstellung der Einsatzberichte.
 *
 * Die Farben stehen als Eigenschaften im umschließenden Element und werden
 * dort vom Block gesetzt. Deshalb gibt es hier keine einzige feste Farbe:
 * Jeder Block lässt sich einzeln einfärben, ohne dass jemand CSS schreibt.
 */

.pev {
	--pev-akzent: #c0392b;
	--pev-grund: #fff;
	--pev-text: #1f2328;
	--pev-rahmen: #e3e5e8;
	--pev-ecken: 12px;
	--pev-spalten: 3;
	--pev-schatten: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);

	color: var(--pev-text);
}

.pev__ueberschrift {
	margin: 0 0 1rem;
}

.pev__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pev__titel {
	margin: 0.2rem 0 0.4rem;
	font-size: 1.15rem;
	line-height: 1.3;
}

.pev__titel a {
	color: inherit;
	text-decoration: none;
}

.pev__titel a:hover,
.pev__titel a:focus {
	text-decoration: underline;
}

.pev__datum {
	margin: 0;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
	color: var(--pev-akzent);
	font-weight: 600;
}

.pev__uhrzeit {
	opacity: 0.7;
	font-weight: 400;
}

.pev__marken {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
}

.pev__marke {
	display: inline-flex;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pev-akzent) 12%, transparent);
	color: var(--pev-akzent);
	font-weight: 600;
	white-space: nowrap;
}

/* Ältere Browser kennen color-mix nicht - dann bleibt es schlicht. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.pev__marke {
		background: var(--pev-rahmen);
		color: inherit;
	}
}

.pev__marke--fehlalarm {
	background: var(--pev-rahmen);
	color: inherit;
}

.pev__ort,
.pev__fahrzeuge {
	opacity: 0.75;
}

.pev__auszug {
	margin: 0 0 0.6rem;
	line-height: 1.6;
}

.pev__mehr a {
	color: var(--pev-akzent);
	font-weight: 600;
	text-decoration: none;
}

.pev__mehr a:hover,
.pev__mehr a:focus {
	text-decoration: underline;
}

.pev__eintrag.ist-fehlalarm .pev__datum {
	color: inherit;
	opacity: 0.7;
}

/* ---------------------------------------------------------------- Karten */

.pev--karten .pev__liste {
	display: grid;
	grid-template-columns: repeat(var(--pev-spalten), minmax(0, 1fr));
	gap: 1.2rem;
}

.pev--karten .pev__eintrag {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--pev-rahmen);
	border-radius: var(--pev-ecken);
	background: var(--pev-grund);
	box-shadow: var(--pev-schatten);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pev--karten .pev__eintrag:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 14px 32px rgba(0, 0, 0, 0.09);
}

.pev--karten .pev__bild img {
	display: block;
	width: 100%;
	height: 11rem;
	object-fit: cover;
}

.pev--karten .pev__text {
	padding: 1rem 1.1rem 1.1rem;
}

/* ----------------------------------------------------------------- Liste */

.pev--liste .pev__eintrag {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--pev-rahmen);
}

.pev--liste .pev__eintrag:last-child {
	border-bottom: 0;
}

.pev--liste .pev__titel {
	font-size: 1rem;
}

/* --------------------------------------------------------------- Tabelle */

.pev__tabelle {
	width: 100%;
	border-collapse: collapse;
	background: var(--pev-grund);
	border-radius: var(--pev-ecken);
	overflow: hidden;
}

.pev__tabelle th,
.pev__tabelle td {
	padding: 0.65rem 0.8rem;
	text-align: left;
	border-bottom: 1px solid var(--pev-rahmen);
}

.pev__tabelle thead th {
	background: color-mix(in srgb, var(--pev-akzent) 10%, transparent);
	color: var(--pev-akzent);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pev__tabelle td a {
	color: inherit;
	font-weight: 600;
}

/* ------------------------------------------------------------ Zeitstrahl */

.pev--zeitstrahl .pev__liste {
	position: relative;
	padding-left: 1.6rem;
}

.pev--zeitstrahl .pev__liste::before {
	content: "";
	position: absolute;
	left: 0.32rem;
	top: 0.4rem;
	bottom: 0.4rem;
	width: 2px;
	background: var(--pev-rahmen);
}

.pev--zeitstrahl .pev__eintrag {
	position: relative;
	padding: 0 0 1.4rem;
}

.pev--zeitstrahl .pev__eintrag::before {
	content: "";
	position: absolute;
	left: -1.6rem;
	top: 0.35rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 999px;
	background: var(--pev-akzent);
	box-shadow: 0 0 0 3px var(--pev-grund);
}

.pev--zeitstrahl .pev__eintrag.ist-fehlalarm::before {
	background: var(--pev-rahmen);
}

.pev-leer {
	opacity: 0.7;
}

/* ------------------------------------------------- Kleine Bildschirme --- */

@media (max-width: 782px) {
	.pev--karten .pev__liste {
		grid-template-columns: 1fr;
	}

	.pev__tabelle thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.pev__tabelle tr {
		display: block;
		padding: 0.6rem 0;
		border-bottom: 2px solid var(--pev-rahmen);
	}

	.pev__tabelle td {
		display: block;
		border: 0;
		padding: 0.15rem 0;
	}

	.pev__tabelle td::before {
		content: attr(data-spalte) ": ";
		font-weight: 600;
		opacity: 0.7;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pev--karten .pev__eintrag {
		transition: none;
	}

	.pev--karten .pev__eintrag:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Eckdaten eines Berichts
 *
 * Aufgebaut wie eine Karte: oben der Kopf mit Zeit und Marken, darunter die
 * Eckdaten in einem Raster, das sich selbst umbricht, und zuletzt die Kräfte
 * als einzelne Marken. Eine Zeile „LF 20, DLK 23, ELW 1“ liest sich deutlich
 * schlechter als drei Marken nebeneinander.
 * ---------------------------------------------------------------------- */

.pev-details {
	--pev-akzent: #c0392b;
	--pev-grund: #fff;
	--pev-text: #1f2328;
	--pev-rahmen: #e3e5e8;
	--pev-ecken: 12px;

	margin: 0 0 2rem;
	border: 1px solid var(--pev-rahmen);
	border-radius: var(--pev-ecken);
	background: var(--pev-grund);
	color: var(--pev-text);
	overflow: hidden;
}

.pev-details__bild {
	display: block;
	width: 100%;
	height: auto;
	/* Steht unter den Angaben, also braucht es oben eine Trennlinie. */
	border-top: 1px solid var(--pev-rahmen);
}

/* --------------------------------------------------------------- Kopf --- */

.pev-details__kopf {
	position: relative;
	padding: 1.2rem 1.3rem 1.1rem;
	border-bottom: 1px solid var(--pev-rahmen);
	background: color-mix(in srgb, var(--pev-akzent) 6%, transparent);
}

.pev-details__kopf::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--pev-akzent);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.pev-details__kopf {
		background: transparent;
	}
}

.pev-details.ist-fehlalarm .pev-details__kopf::before {
	background: var(--pev-rahmen);
}

.pev-details__marken {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.5rem;
}

.pev-marke {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	background: var(--pev-akzent);
	color: #fff;
	white-space: nowrap;
}

.pev-marke--special {
	background: transparent;
	border: 1px solid var(--pev-akzent);
	color: var(--pev-akzent);
}

.pev-marke--fehlalarm {
	background: var(--pev-rahmen);
	color: inherit;
}

.pev-details__zeit {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.pev-details__zeit .pev-details__zeichen {
	color: var(--pev-akzent);
}

.pev-details__zahlen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.6rem;
	margin: 0.7rem 0 0;
	padding: 0;
	list-style: none;
}

.pev-details__zahlen li {
	margin: 0;
}

/* ------------------------------------------------------------- Raster --- */

.pev-details__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.2rem 1.4rem;
	margin: 0;
	padding: 1rem 1.3rem;
	list-style: none;
}

.pev-details__kachel {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	padding: 0.45rem 0;
}

.pev-details__zeichen {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	opacity: 0.8;
}

.pev-details__raster .pev-details__zeichen {
	margin-top: 0.15rem;
	color: var(--pev-akzent);
}

.pev-details__text {
	min-width: 0;
}

.pev-details__name {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.55;
}

.pev-details__wert {
	display: block;
	font-size: 1rem;
	line-height: 1.4;
	word-break: break-word;
}

.pev-details__zahlen .pev-details__wert {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* ------------------------------------------------------------ Gruppen --- */

.pev-details__gruppen {
	padding: 0 1.3rem 1.2rem;
	display: grid;
	gap: 0.9rem;
}

/* Folgt das Bild unmittelbar auf das Raster, fehlt sonst der Abstand. */

.pev-details__raster:last-child {
	padding-bottom: 1.2rem;
}

.pev-details__gruppe .pev-details__name {
	margin-bottom: 0.35rem;
}

.pev-details__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
}

.pev-chip {
	display: inline-flex;
	padding: 0.25rem 0.7rem;
	border: 1px solid var(--pev-rahmen);
	border-radius: 999px;
	font-size: 0.88rem;
	line-height: 1.4;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.pev-details__kopf,
	.pev-details__raster,
	.pev-details__gruppen {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.pev-details__zeit {
		font-size: 1.15rem;
	}
}

/* -------------------------------------------------------------------------
 * Jahresnavigation
 * ---------------------------------------------------------------------- */

.pev-jahre {
	--pev-akzent: #c0392b;
	--pev-rahmen: #e3e5e8;
	--pev-ecken: 12px;

	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0 0 1.5rem;
}

.pev-jahr {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--pev-rahmen);
	border-radius: 999px;
	color: inherit;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.pev-jahr:hover,
.pev-jahr:focus {
	border-color: var(--pev-akzent);
	color: var(--pev-akzent);
}

.pev-jahr.ist-aktuell {
	border-color: var(--pev-akzent);
	background: var(--pev-akzent);
	color: #fff;
	font-weight: 600;
}

.pev-jahr__anzahl {
	font-size: 0.8em;
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.pev-jahr {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Zähler und Statistik
 * ---------------------------------------------------------------------- */

.pev-zaehler {
	--pev-akzent: #c0392b;
	--pev-grund: #fff;
	--pev-rahmen: #e3e5e8;
	--pev-ecken: 12px;

	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 1.2rem 1.8rem;
	border: 1px solid var(--pev-rahmen);
	border-radius: var(--pev-ecken);
	background: var(--pev-grund);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.pev-zaehler:hover,
.pev-zaehler:focus {
	border-color: var(--pev-akzent);
}

.pev-zaehler__zahl {
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	color: var(--pev-akzent);
	font-variant-numeric: tabular-nums;
}

.pev-zaehler__text {
	font-size: 0.9rem;
	opacity: 0.8;
}

.pev-statistik {
	--pev-akzent: #c0392b;
	--pev-rahmen: #e3e5e8;
}

.pev-statistik__titel {
	margin: 0 0 0.8rem;
	font-size: 1.15rem;
}

.pev-statistik__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pev-statistik__zeile {
	display: grid;
	grid-template-columns: minmax(6rem, 11rem) 1fr auto;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
}

.pev-statistik__balken {
	display: block;
	height: 0.7rem;
	border-radius: 999px;
	background: var(--pev-rahmen);
	overflow: hidden;
}

.pev-statistik__fuellung {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--pev-akzent);
}

.pev-statistik__zahl {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.pev-statistik__anteil {
	font-weight: 400;
	opacity: 0.6;
	font-size: 0.85em;
}

@media (max-width: 600px) {
	.pev-statistik__zeile {
		grid-template-columns: 1fr auto;
	}

	.pev-statistik__balken {
		grid-column: 1 / -1;
		order: 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pev-zaehler {
		transition: none;
	}
}

.pev-details__bild {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 1rem;
	border-radius: calc(var(--pev-ecken) - 4px);
}

/* Die Einsatznummer - Ziffern sollen untereinander stehen. */

.pev__nummer {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	opacity: 0.75;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Staffelung nach Monaten
 * ---------------------------------------------------------------------- */

.pev__monat-titel {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 1.6rem 0 0.7rem;
	font-size: 1.05rem;
	color: var(--pev-akzent);
}

.pev__monat-titel:first-child {
	margin-top: 0;
}

.pev__monat-anzahl {
	font-size: 0.8rem;
	font-weight: 400;
	opacity: 0.6;
	color: var(--pev-text);
}

.pev__tabelle .pev__monat th {
	background: color-mix(in srgb, var(--pev-akzent) 8%, transparent);
	color: var(--pev-akzent);
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.pev__tabelle .pev__monat th {
		background: var(--pev-rahmen);
		color: inherit;
	}
}

/* Im Zeitstrahl sitzt die Linie links - die Monatsüberschrift rückt mit. */

.pev--zeitstrahl .pev__monat-titel {
	padding-left: 1.6rem;
}

/* -------------------------------------------------------------------------
 * Breite
 *
 * Gesetzt wird eine Höchstbreite, keine feste. Dadurch schrumpft der Block
 * auf schmalen Bildschirmen mit, statt seitwärts hinauszuragen - genau das
 * ist der Unterschied zwischen „breit“ und „kaputt auf dem Telefon“.
 * ---------------------------------------------------------------------- */

.pev,
.pev-statistik,
.pev-jahre,
.pev-details {
	max-width: var(--pev-breite, none);
}

.pev-zaehler {
	max-width: var(--pev-breite, none);
}

.ist-zentriert {
	margin-left: auto;
	margin-right: auto;
}

.pev-zaehler.ist-zentriert {
	display: flex;
}

/* Verlinkte Marken sollen als anklickbar erkennbar sein. */

.pev-chip.ist-verlinkt {
	color: var(--pev-akzent);
	border-color: color-mix(in srgb, var(--pev-akzent) 35%, var(--pev-rahmen));
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.pev-chip.ist-verlinkt:hover,
.pev-chip.ist-verlinkt:focus {
	background: color-mix(in srgb, var(--pev-akzent) 10%, transparent);
	border-color: var(--pev-akzent);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.pev-chip.ist-verlinkt {
		border-color: var(--pev-akzent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pev-chip.ist-verlinkt {
		transition: none;
	}
}