/* ===================================================================
   Kennzahlen-Historie — Darstellung der Verlaufstabelle.

   Gehört zu kennzahlen-historie.php. Ausgelagert wie das übrige CSS,
   damit die Datei im Browser-Cache landet. Benutzt die Farbvariablen
   aus fomo-stil.css.
   =================================================================== */

/* Breite bändigen — der wichtigste Block in dieser Datei.
   27 Geschäftsjahre ergeben eine rund 2.000 Pixel breite Tabelle. Ohne die
   folgenden Regeln wächst der umgebende Container einfach mit, statt die
   Tabelle scrollen zu lassen, und sprengt damit das gesamte Seitenlayout.
   `min-width: 0` ist dabei entscheidend: In Flex- und Grid-Containern (wie
   sie GeneratePress verwendet) ist die Vorgabe `min-width: auto`, und die
   verhindert jedes Schrumpfen unter die Inhaltsbreite. */
.fomo-kh {
	margin: 0 0 2em;
	max-width: 100%;
	min-width: 0;
}
.fomo-kh-panel { min-width: 0; max-width: 100%; }
/* Kategorie-Reiter: eine Haarlinie statt eines 2px-Balkens, damit die
   Reiter die Sektion gliedern, ohne sie zu dominieren. */
.fomo-kh-tabs {
	display: flex; flex-wrap: wrap; gap: 2px;
	border-bottom: 1px solid var(--linie, #e4ebf5); margin-bottom: 16px;
}
/* `button.klasse` statt reiner Klasse: Das Theme setzt
   `button:not(.menu-toggle) { font-size: 19px; font-weight: 600 }` mit
   Spezifität 0,1,1 und würde eine Klassenregel (0,1,0) überschreiben. */
button.fomo-kh-tab {
	background: none; border: none; border-bottom: 2px solid transparent;
	margin-bottom: -1px; padding: 7px 13px;
	font-size: var(--txt-sm, 13px); font-weight: 500;
	color: var(--grau, #5a6b85); cursor: pointer; font-family: inherit;
	transition: color .12s ease;
}
button.fomo-kh-tab:hover { color: var(--navy, #1A2D4A); }
button.fomo-kh-tab.aktiv {
	color: var(--blau, #3066b2);
	border-bottom-color: var(--blau, #3066b2);
	font-weight: 600;
}
.fomo-kh-panel { display: none; }
.fomo-kh-panel.aktiv { display: block; }

/* Kennzahlen-Umschalter: dieselbe segmentierte Form wie am Kurschart —
   ein Rahmen um die Gruppe, Haarlinien dazwischen, nur das aktive Feld
   gefüllt. Vorher war jeder Knopf eine eigene graue Fläche. */
.fomo-kh-mbtns {
	display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px;
}
button.fomo-kh-mbtn {
	background: var(--hell, #F0F4FA); border: none; border-radius: 4px;
	padding: 5px 12px; font-size: var(--txt-sm, 13px); font-weight: 500;
	color: var(--navy, #1A2D4A); cursor: pointer; font-family: inherit;
	transition: background-color .12s ease;
}
button.fomo-kh-mbtn:hover { background: #e3ebf7; }
button.fomo-kh-mbtn.aktiv { background: var(--blau, #3066b2); color: #fff; }
button.fomo-kh-mbtn.aktiv:hover { background: var(--blau, #3066b2); }
button.fomo-kh-tab:focus-visible { outline: 2px solid var(--blau, #3066b2); outline-offset: 2px; }
button.fomo-kh-mbtn:focus-visible { outline: 2px solid var(--blau, #3066b2); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	button.fomo-kh-tab, button.fomo-kh-mbtn { transition: none; }
}
.fomo-kh-figur { margin: 0 0 1.2em; }
.fomo-kh-figur figcaption { font-weight: 600; margin-bottom: .5em; }
.fomo-kh-svg { width: 100%; max-width: 100%; min-width: 0; }
.fomo-kh-svg svg { display: block; width: 100%; height: auto; }
.fomo-kh-balken { fill: var(--blau, #3066b2); }
.fomo-kh-balken.negativ { fill: #94a3b8; }
.fomo-kh-linie { fill: none; stroke: var(--blau, #3066b2); stroke-width: 2; }
.fomo-kh-punkt { fill: var(--blau, #3066b2); }
.fomo-kh-gitter { stroke: var(--linie, #e4ebf5); stroke-width: 1; }
.fomo-kh-achse { fill: var(--grau, #5a6b85); font-size: 11px; }
.fomo-kh-treffer { fill: transparent; cursor: crosshair; }
.fomo-kh-treffer:hover { fill: rgba(48,102,178,.07); }

/* Tabelle — der eigentliche Grund für diese Sektion */
.fomo-kh-details {
	margin-top: 1.2em;
	border-top: 1px solid var(--linie, #e4ebf5);
	padding-top: .8em;
}
.fomo-kh-details summary {
	cursor: pointer;
	font-size: var(--txt-sm, 13px);
	color: var(--blau, #3066b2);
	font-weight: 500;
	list-style-position: outside;
}
.fomo-kh-details summary:hover { text-decoration: underline; }
.fomo-kh-details summary:focus-visible {
	outline: 2px solid var(--blau, #3066b2);
	outline-offset: 2px;
}
.fomo-kh-tabelle-wrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	margin-top: 1em;
	/* Randlinie zeigt, dass hier seitlich gescrollt werden kann. */
	border: 1px solid var(--linie, #e4ebf5);
	border-radius: var(--r-s, 5px);
}
.fomo-kh-tabelle {
	border-collapse: collapse;
	font-size: var(--txt-sm, 13px);
	white-space: nowrap;
	/* Die Tabelle darf breiter sein als ihr Container — genau dafür ist der
	   Wrapper da. Ohne diese Zeile stauchen manche Browser sie stattdessen. */
	width: max-content;
	min-width: 100%;
}
.fomo-kh-caption {
	text-align: left; font-size: var(--txt-xs, 12px); color: var(--grau, #5a6b85); padding-bottom: .5em;
}
.fomo-kh-tabelle th, .fomo-kh-tabelle td {
	padding: .42em .7em; text-align: right;
	font-variant-numeric: tabular-nums;
}
/* Kopfzeile ohne Füllfläche, dafür eine kräftigere Unterlinie: Bei
   28 Spalten wirkte der graue Balken wie ein zweiter Rahmen. */
.fomo-kh-tabelle thead th {
	background: #fff; font-weight: 600;
	font-size: var(--txt-xs, 12px); color: var(--grau, #5a6b85);
	border-bottom: 2px solid var(--linie, #e4ebf5);
}
/* Zebrastreifen statt einer Linie unter jeder Zeile — führt das Auge über
   die volle Breite, ohne 28 Spalten in ein Gitter zu sperren. */
.fomo-kh-tabelle tbody tr:nth-child(even) { background: rgba(48, 102, 178, .025); }
.fomo-kh-tabelle tbody th {
	text-align: left; font-weight: 500; position: sticky; left: 0; background: #fff;
}
.fomo-kh-tabelle tbody tr:nth-child(even) th { background: #fbfcfe; }
.fomo-kh-tabelle thead th:first-child {
	text-align: left; position: sticky; left: 0; z-index: 1; background: #fff;
}
.fomo-kh-fuss { margin-top: 1em; font-size: var(--txt-xs, 12px); color: var(--grau, #5a6b85); }
.fomo-kh-hinweis { padding: 1em; background: var(--flaeche, #f7f9fc); border-radius: var(--r-s, 5px); }
@media (max-width: 768px) {
	.fomo-kh-tabelle { font-size: var(--txt-xs, 12px); }
}