/* FF Einsatzstatistik – Frontend */

.ffes-chart {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.ffes-chart text {
	fill: currentColor;
	font-family: inherit;
	font-size: 13px;
}

.ffes-chart .ffes-y,
.ffes-chart .ffes-x {
	text-anchor: end;
}

.ffes-chart .ffes-raster {
	stroke: rgba(128, 128, 128, 0.35);
	stroke-width: 1;
	shape-rendering: crispEdges;
}

.ffes-chart .ffes-achse {
	stroke: currentColor;
	stroke-width: 1.5;
	shape-rendering: crispEdges;
}

.ffes-chart .ffes-hit {
	fill: transparent;
}

.ffes-chart .ffes-einfarbig {
	fill: var(--ffes-farbe, #c62828);
}

.ffes-chart .ffes-bar rect:not(.ffes-hit) {
	transition: opacity 0.15s;
}

.ffes-chart:hover .ffes-bar rect:not(.ffes-hit) {
	opacity: 0.5;
}

.ffes-chart .ffes-bar:hover rect:not(.ffes-hit) {
	opacity: 1;
}

.ffes-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.9em;
	margin: 0.6em 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85em;
	line-height: 1.3;
}

.ffes-legende li {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 0;
}

.ffes-legende li::before {
	content: none;
}

.ffes-legende span {
	flex: none;
	width: 0.8em;
	height: 0.8em;
	border-radius: 2px;
}

.ffes-aktuell {
	margin: 0.6em 0 0;
	font-size: 0.9em;
}

.ffes-details {
	margin: 0.6em 0 0;
	font-size: 0.9em;
}

.ffes-details summary {
	cursor: pointer;
}

.ffes-tabelle-wrap {
	overflow-x: auto;
	margin-top: 0.4em;
}

.ffes-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85em;
}

.ffes-tabelle th,
.ffes-tabelle td {
	padding: 0.25em 0.4em;
	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
	text-align: right;
	white-space: nowrap;
}

.ffes-tabelle thead th {
	white-space: normal;
	vertical-align: bottom;
}

.ffes-tabelle th:first-child {
	text-align: left;
}

.ffes-edit {
	margin: 0.5em 0 0;
	font-size: 0.8em;
}

.ffes-leer {
	margin: 0;
	font-style: italic;
}

/* Diagramm-Ergänzungen */

.ffes-chart .ffes-x-gerade {
	text-anchor: middle;
}

.ffes-chart .ffes-wert {
	text-anchor: middle;
	font-size: 11px;
	font-weight: 600;
}

.ffes-chart .ffes-wert-klein {
	font-size: 10px;
	font-weight: 400;
}

.ffes-chart .ffes-linie {
	stroke: currentColor;
	stroke-width: 1;
	stroke-dasharray: 4 3;
	opacity: 0.7;
}

.ffes-chart .ffes-linie-text {
	font-size: 11px;
}

.ffes-chart .ffes-wert-rechts {
	text-anchor: start;
}

.ffes-chart .ffes-betont .ffes-wert {
	font-weight: 600;
}

.ffes-chart .ffes-punkt circle {
	stroke: #fff;
	stroke-width: 1;
}

.ffes-chart.ffes-waagrecht .ffes-y {
	font-size: 11px;
}

.ffes-chart .ffes-gedimmt rect:not(.ffes-hit) {
	opacity: 0.45;
}

/* Detailansicht */

.ffes-detail {
	--ffes-rand: rgba(128, 128, 128, 0.25);
}

.ffes-detail .ffes-abschnitt {
	margin: 2em 0 0;
}

.ffes-detail .ffes-abschnitt h3 {
	margin: 0 0 0.6em;
}

.ffes-auswahl {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1em;
}

.ffes-kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr));
	gap: 0.75em;
}

.ffes-kachel {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	padding: 0.9em 1em;
	border: 1px solid var(--ffes-rand);
	border-radius: 6px;
}

.ffes-kachel-zahl {
	font-size: 2em;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.ffes-kachel-text {
	font-weight: 600;
}

.ffes-kachel-zusatz,
.ffes-hinweis {
	font-size: 0.85em;
	opacity: 0.75;
}

.ffes-hinweis {
	margin: 0.4em 0 0;
}

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

.ffes-anteile li {
	display: grid;
	grid-template-columns: minmax(7em, 12em) 1fr auto;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 0.45em;
	padding: 0;
}

.ffes-anteile li::before {
	content: none;
}

.ffes-anteil-balken {
	height: 0.9em;
	border-radius: 2px;
	background: rgba(128, 128, 128, 0.12);
	overflow: hidden;
}

.ffes-anteil-balken span {
	display: block;
	height: 100%;
}

.ffes-anteil-wert {
	min-width: 4.5em;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ffes-liste th,
.ffes-liste td:first-child,
.ffes-liste td:nth-child(2),
.ffes-liste td:nth-child(3) {
	text-align: left;
	white-space: normal;
}

.ffes-punkt {
	display: inline-block;
	width: 0.65em;
	height: 0.65em;
	margin-right: 0.4em;
	border-radius: 50%;
}

@media (max-width: 480px) {
	.ffes-anteile li {
		grid-template-columns: 1fr auto;
	}

	.ffes-anteil-balken {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

.ffes-kennzahl .ffes-titel {
	margin: 0 0 0.6em;
}

.ffes-redaktion {
	padding: 0.5em 0.75em;
	border: 1px dashed currentColor;
}

/* Tabellen gegen Theme-Stile absichern (Hintergrund, Rahmen, feste Breite) */
body .ffes .ffes-tabelle-wrap {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

body .ffes table.ffes-tabelle {
	display: table;
	width: 100%;
	max-width: none;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	table-layout: auto;
}

body .ffes table.ffes-tabelle th,
body .ffes table.ffes-tabelle td {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

body .ffes table.ffes-tabelle thead th {
	border-bottom-width: 2px;
}

body .ffes .ffes-liste td:first-child,
body .ffes .ffes-liste td:nth-child(2) {
	white-space: nowrap;
}

/* Jahresauswahl: ‹ 2026 › */
.ffes {
	--ffes-akzent: #c62828;
}

body .ffes .ffes-jahrwahl {
	display: inline-flex;
	align-items: stretch;
	margin: 0 0 1.2em;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 999px;
	overflow: hidden;
}

body .ffes .ffes-jahrwahl .ffes-pfeil {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	color: inherit;
	font-size: 1.2em;
	line-height: 1;
	text-decoration: none;
}

body .ffes .ffes-jahrwahl a.ffes-pfeil:hover,
body .ffes .ffes-jahrwahl a.ffes-pfeil:focus-visible {
	background: var(--ffes-akzent);
	color: #fff;
}

body .ffes .ffes-jahrwahl .ffes-pfeil.is-aus {
	opacity: 0.25;
}

body .ffes .ffes-jahrwahl select {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0.35em 1.8em 0.35em 0.9em;
	border: 0;
	border-left: 1px solid rgba(128, 128, 128, 0.35);
	border-right: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 0.7em center;
	color: inherit;
	font: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	box-shadow: none;
	height: auto;
	min-height: 0;
	width: auto;
}

body .ffes .ffes-jahrwahl select:focus-visible {
	outline: 2px solid var(--ffes-akzent);
	outline-offset: -2px;
}

/* Kuchendiagramm */
.ffes-kuchen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em 2em;
}

.ffes-kuchen-svg {
	display: block;
	flex: 0 1 260px;
	width: 100%;
	max-width: 260px;
	height: auto;
}

.ffes-kuchen-svg .ffes-stueck {
	transition: opacity 0.15s;
}

.ffes-kuchen-svg:hover .ffes-stueck {
	opacity: 0.6;
}

.ffes-kuchen-svg .ffes-stueck:hover {
	opacity: 1;
}

.ffes-kuchen-svg text {
	text-anchor: middle;
	font-family: inherit;
}

.ffes-kuchen-prozent {
	fill: #fff;
	font-size: 13px;
	font-weight: 600;
}

.ffes-kuchen-summe {
	fill: currentColor;
	font-size: 34px;
	font-weight: 700;
}

.ffes-kuchen-mitte {
	fill: currentColor;
	font-size: 13px;
	opacity: 0.7;
}

body .ffes .ffes-kuchen-legende {
	flex: 1 1 14em;
	margin: 0;
	padding: 0;
	list-style: none;
}

body .ffes .ffes-kuchen-legende li {
	display: grid;
	grid-template-columns: 0.9em 1fr auto auto;
	align-items: center;
	gap: 0.6em;
	margin: 0;
	padding: 0.35em 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

body .ffes .ffes-kuchen-legende li::before {
	content: none;
}

.ffes-kuchen-farbe {
	width: 0.9em;
	height: 0.9em;
	border-radius: 2px;
}

.ffes-kuchen-wert {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.ffes-kuchen-anteil {
	min-width: 4em;
	opacity: 0.7;
	font-size: 0.9em;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ffes-kennzahl-text {
	margin: 0 0 1em;
}

.ffes-kuchen-name {
	display: flex;
	flex-direction: column;
}

.ffes-kuchen-detail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15em 0.4em;
	font-size: 0.8em;
	opacity: 0.75;
}

.ffes-kuchen-unterfarbe {
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-right: 0.25em;
	border-radius: 50%;
}

/* ♀ ♂ als Grafik, sitzt auf der Grundlinie wie ein Buchstabe */
.ffes-sym-w,
.ffes-sym-m {
	display: inline-block;
	line-height: 1;
	white-space: nowrap;
}

.ffes .ffes-sym {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	vertical-align: -0.08em;
	overflow: visible;
}

.ffes-kuchen-detail .ffes-sym {
	width: 0.8em;
	height: 0.8em;
}