/* ===========================================================================
   Dividendenseite — Zusatz zu fomo-stil.css
   ===========================================================================
   Nur was es auf den anderen Seiten nicht schon gibt. Alles Gemeinsame
   (Kacheln, Leitzahl, Abschnitte, Sprungmarken, Hinweise, Farb- und
   Schriftvariablen) kommt aus fomo-stil.css; diese Datei wird mit einer
   Abhängigkeit darauf geladen.

   Erstellt 24.09.2026 mit der Seite.
   =========================================================================== */

/* Die Unterzeile einer Abschnitts-Überschrift steht seit 18.10.2026 in
   fomo-stil.css (vorher wortgleich in allen drei Seiten-CSS). */

/* ---------------------------------------------------------------------------
   Verlauf je Jahr
   ---------------------------------------------------------------------------
   Einseitige Balken, anders als der Überraschungsverlauf der Quartalsseite:
   Dort geht es um Abweichungen um eine Nulllinie (plus/minus), hier um einen
   Betrag, der nicht negativ werden kann. Ein Balken von links nach rechts ist
   dafür die richtige Form — eine Nulllinie in der Mitte wäre irreführend. */
.fomo-div-verlauf {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: .9rem;
}

.fomo-div-zeile {
	display: grid;
	grid-template-columns: 3.4rem 1fr 5.2rem 4.4rem;
	align-items: center;
	gap: .6rem;
	padding: .3rem 0;
	font-size: var(--txt-sm);
}

.fomo-div-jahr {
	font-weight: 600;
	color: var(--navy);
	font-variant-numeric: tabular-nums;
}

.fomo-div-schiene {
	position: relative;
	height: 16px;
	border-radius: var(--r-s);
	background: var(--flaeche);
	border: 1px solid var(--linie);
	min-width: 0;
}

.fomo-div-balken {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	border-radius: 2px;
	background: var(--navy);
	max-width: calc(100% - 6px);
	margin-left: 3px;
}

.fomo-div-wert,
.fomo-div-delta {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fomo-div-wert  { font-weight: 600; color: var(--navy); }

/* Die Farbregel des Projekts: Absolutwert schwarz, Veränderung farbig.
   Sie fällt hier wie überall mit der Schriftstärke zusammen. */
.fomo-div-delta.gut      { color: var(--gut); }
.fomo-div-delta.schlecht { color: var(--schlecht); }
.fomo-div-delta.leer     { color: var(--grau); }

/* ---------------------------------------------------------------------------
   Tabelle aller Ausschüttungen
   ---------------------------------------------------------------------------
   Gleiche Anmutung wie .fomo-termine auf der Quartalsseite, damit die Seiten
   wie aus einem Guss wirken. Eigener Klassenname, weil das Stylesheet der
   Quartalsseite hier nicht geladen wird. */
/* Feste, gleich breite Spalten (18.10.2026): Automatisch verteilt bekam die
   Betragsspalte fast die halbe Breite, der Betrag stand weit weg vom Ex-Tag. */
.fomo-div-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--txt-sm);
	table-layout: fixed;
}

.fomo-div-tabelle th,
.fomo-div-tabelle td {
	padding: .5rem .7rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	border-bottom: 1px solid var(--linie);
	white-space: nowrap;
}

.fomo-div-tabelle thead th {
	font-weight: 600;
	color: var(--grau);
	font-size: var(--txt-xs);
	border-bottom: 2px solid var(--linie);
}

.fomo-div-tabelle td:first-child,
.fomo-div-tabelle th:first-child { text-align: left; }

/* Sternchen hinter splitbereinigten Beträgen — gedämpft, damit es die Zahl
   nicht überstrahlt. Dasselbe Muster wie bei den abgeleiteten Meldezeitpunkten
   in der Terminhistorie der Quartalsseite. */
.fomo-div-stern {
	color: var(--grau);
	font-weight: 400;
	margin-left: .15em;
}

/* ---------------------------------------------------------------------------
   Schmale Bildschirme
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.fomo-div-zeile {
		grid-template-columns: 2.9rem 1fr 4.4rem 3.8rem;
		gap: .4rem;
		font-size: var(--txt-xs);
	}
}

/* ---------------------------------------------------------------------------
   Verlauf der Dividendenrendite
   ---------------------------------------------------------------------------
   Aufbau: ein Raster aus drei Zellen. Links die Y-Achse, rechts das Feld mit
   dem SVG, darunter die Jahresmarken. Das SVG wird absichtlich ungleichmäßig
   gestreckt (`preserveAspectRatio="none"`), damit es das Feld exakt füllt —
   das ist hier gefahrlos, weil darin kein Text und kein Kreis steckt und
   `vector-effect` die Strichstärken konstant hält.

   Alle Texte und der Endpunkt sind HTML und skalieren deshalb NICHT mit. Die
   erste Fassung hatte sie im SVG; auf schmalen Bildschirmen wurden sie dadurch
   gestaucht und unlesbar klein. */

.fomo-div-chart {
	display: grid;
	grid-template-columns: 3.6rem 1fr;
	grid-template-rows: 1fr auto;
	margin-top: 1.1rem;
	padding: .6rem .9rem .3rem .3rem;
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: var(--r-s);
}

/* Y-Achse: die Zahlen hängen an derselben Prozenthöhe wie die Rasterlinien. */
.fomo-div-yachse {
	position: relative;
	height: 220px;
}

.fomo-div-ytick {
	position: absolute;
	right: .45rem;
	transform: translateY(-50%);
	font-size: var(--txt-xs);
	color: var(--grau);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fomo-div-feld {
	position: relative;
	height: 220px;
	min-width: 0;
}

.fomo-div-plot {
	display: block;
	width: 100%;
	height: 100%;
}

/* Raster und Achsen: dünn, durchgezogen, einen Schritt neben der Fläche.
   Nie gestrichelt — das liest sich als Schwelle, wo nur ein Raster ist. */
.fomo-div-raster {
	stroke: var(--linie);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* Gestrichelt ist allein die Medianlinie: Sie ist eine Vergleichsmarke und
   trägt keine Daten. */
.fomo-div-medianlinie {
	stroke: var(--grau);
	stroke-width: 1;
	stroke-dasharray: 4 3;
	vector-effect: non-scaling-stroke;
}

.fomo-div-flaeche {
	fill: var(--navy);
	fill-opacity: .1;
	stroke: none;
}

.fomo-div-linie {
	fill: none;
	stroke: var(--navy);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

/* Endpunkt: 9 px plus 2 px Ring in der Flächenfarbe, damit er dort lesbar
   bleibt, wo er die Linie kreuzt. Als HTML-Element bleibt er rund. */
.fomo-div-punkt {
	position: absolute;
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	background: var(--navy);
	box-shadow: 0 0 0 2px var(--flaeche);
}

/* Direkte Beschriftung statt Legende — bei einer einzigen Datenreihe wäre eine
   Legende nur eine Wiederholung der Überschrift. */
.fomo-div-label {
	position: absolute;
	transform: translateY(-50%);
	font-size: var(--txt-xs);
	white-space: nowrap;
	background: var(--flaeche);
	padding: 0 .25rem;
}

.fomo-div-label-aktuell {
	right: 0;
	margin-top: -1.1rem;
	font-weight: 600;
	color: var(--navy);
}

.fomo-div-label-median        { right: 0; margin-top: .95rem; color: var(--grau); }
.fomo-div-label-median.links  { right: auto; left: 0; }

/* Jahresmarken: in der zweiten Rasterzeile, also unter dem Feld. */
.fomo-div-xachse {
	grid-column: 2;
	position: relative;
	height: 1.25rem;
	margin-top: .15rem;
}

.fomo-div-xtick {
	position: absolute;
	transform: translateX(-50%);
	font-size: var(--txt-xs);
	color: var(--grau);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.fomo-div-chart { grid-template-columns: 3rem 1fr; padding-right: .5rem; }
	.fomo-div-yachse,
	.fomo-div-feld  { height: 170px; }
}

/* Kennzeichen einer Sonderdividende in der Zahlungstabelle (07.10.2026).
   Klein und gedämpft wie das Split-Sternchen — die Zahl bleibt die Hauptsache. */
.fomo-div-sonder {
	display: inline-block;
	margin-left: .4em;
	padding: 0 .35em;
	font-size: var(--txt-xs);
	font-weight: 600;
	color: var(--grau);
	border: 1px solid var(--linie);
	border-radius: 3px;
	vertical-align: 1px;
}