/* ===================================================================
   Kurschart — Darstellung.

   Gehört zu kurschart.php. Ausgelagert wie das übrige CSS, damit die
   Datei im Browser-Cache landet statt bei jedem Seitenaufruf erneut
   übertragen zu werden. Benutzt die Farbvariablen aus fomo-stil.css.
   =================================================================== */

.fomo-kurschart-wrapper {
	margin: 0 0 1.5em;
}
.fomo-chart-steuerung {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: space-between;
	align-items: center;
	margin-bottom: .75em;
}
/* Bedienleisten wie im abgenommenen Seitenentwurf: einzelne kleine Flächen
   mit Abstand, 13px Schrift. Alle Maße in Pixel — `em` und `rem` hingen an
   der Schriftgröße von Theme beziehungsweise Dokument und ließen die Knöpfe
   dadurch größer ausfallen als gedacht. */
.fomo-chart-zeitraeume,
.fomo-chart-typen,
.fomo-chart-aufloesungen {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}
/* Zweite Leiste optisch nachrangig: Der Zeitraum ist die häufigere Wahl,
   das Intervall die Feineinstellung darunter. */
.fomo-chart-steuerung-zweite {
	margin-top: 2px;
	margin-bottom: 12px;
	align-items: center;
}
.fomo-chart-beschriftung {
	font-size: var(--txt-xs, 12px);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--grau, #5a6b85);
	margin-right: 8px;
}
/* Selektor bewusst als `button.klasse`, nicht als reine Klasse.
   Das Theme setzt `button:not(.menu-toggle) { font-size: 19px; font-weight: 600 }`
   — Spezifität 0,1,1. Eine Klassenregel allein käme nur auf 0,1,0 und würde
   überschrieben; genau daran blieben die Knöpfe trotz 13px-Angabe groß.
   Mit dem Elementnamen davor liegen wir gleichauf und gewinnen, weil dieses
   CSS später im Dokument steht. */
button.fomo-chart-btn {
	padding: 5px 12px;
	font-family: inherit;   /* Theme setzt hier sonst Helvetica */
	font-size: var(--txt-sm, 13px);
	line-height: 1.4;
	font-weight: 500;
	color: var(--navy, #1A2D4A);
	background: var(--hell, #F0F4FA);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color .12s ease;
}
/* Hover: eine Spur dunkler als die Ruhefläche, mehr nicht. Der frühere
   Sprung auf #dce5f3 war bei sechzehn Knöpfen zu unruhig. */
button.fomo-chart-btn:hover {
	background-color: #e3ebf7;
}
button.fomo-chart-btn.aktiv {
	background-color: var(--blau, #3066b2);
	color: #fff;
}
button.fomo-chart-btn.aktiv:hover {
	background-color: var(--blau, #3066b2);
}
button.fomo-chart-btn:focus-visible {
	outline: 2px solid var(--blau, #3066b2);
	outline-offset: 2px;
}
/* Der Volumen-Schalter ist kein Entweder-oder wie Linie/Kerzen — der
   Abstand macht das sichtbar. */
.fomo-chart-schalter { margin-left: 8px; }

@media (prefers-reduced-motion: reduce) {
	button.fomo-chart-btn { transition: none; }
}
.fomo-chart-flaeche {
	width: 100%;
	height: 420px;
}
@media (max-width: 768px) {
	.fomo-chart-flaeche {
		height: 300px;
	}
	.fomo-chart-steuerung {
		justify-content: flex-start;
	}
}
.fomo-chart-fusszeile {
	margin: .7em 0 0;
	font-size: var(--txt-xs, .75rem);
	color: var(--grau, #5a6b85);
}
.fomo-chart-hinweis {
	padding: 1em;
	background-color: var(--flaeche, #f7f9fc);
	border-radius: var(--r-s, 5px);
}