/* ===========================================================================
   KGV-Seite — Zusatz zu fomo-stil.css
   ===========================================================================
   Nur was es dort nicht schon gibt. Kacheln, Leitzahl, Abschnitte, Bänder,
   Legende, Vergleichstabelle (.fomo-peer) und alle Farb- und
   Schriftvariablen kommen aus fomo-stil.css.

   Chart und Tabelle sind Abwandlungen der Dividendenseite. Eigene Klassennamen,
   weil deren Stylesheet hier nicht geladen wird — dieselbe Abwägung wie dort
   gegenüber der Quartalsseite (siehe fomo-stil-dividende.css, oben).

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

/* Unterzeile und Zwischenüberschrift (.fomo-kgv-zwischen) stehen seit
   18.10.2026 in fomo-stil.css. */

/* Fußnoten direkt unter einem Element. .fomo-hinweis allein setzt 3rem Abstand
   und eine Trennlinie — gedacht für den Seitenschluss, nicht für eine Notiz zum
   Chart darüber. */
.fomo-hinweis.fomo-hinweis-eng {
	margin-top: .75rem;
	padding-top: 0;
	border-top: 0;
}

/* Gründe, warum ein PEG fehlt — gedämpft, aber in normaler Größe: Sie sind
   eine Auskunft, keine Fußnote. */
.fomo-kgv-gruende {
	margin: 1rem 0 0;
	font-size: var(--txt-sm);
	color: var(--grau);
	line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   KGV im Zeitverlauf
   ---------------------------------------------------------------------------
   Aufbau wie das Renditechart der Dividendenseite: links die Y-Achse, rechts
   das Feld mit dem gestreckten SVG (nur Geometrie), darunter die Jahre. Texte
   und Endpunkt sind HTML und bleiben auf jedem Bildschirm gleich groß. */
.fomo-kgv-chart {
	display: grid;
	grid-template-columns: 3.2rem 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);
}

.fomo-kgv-yachse,
.fomo-kgv-feld {
	position: relative;
	height: 240px;
}

.fomo-kgv-feld { min-width: 0; }

.fomo-kgv-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-kgv-plot {
	display: block;
	width: 100%;
	height: 100%;
}

/* Normalbereich: dieselbe Farbe wie das Quartilsband der Bänder darunter —
   der Leser erkennt ihn so auf der ganzen Seite wieder. */
.fomo-kgv-normal {
	fill: #c3d5ee;
	fill-opacity: .55;
}

.fomo-kgv-raster {
	stroke: var(--linie);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* Gestrichelt ist allein der Median — eine Vergleichsmarke, keine Daten. */
.fomo-kgv-medianlinie {
	stroke: var(--grau);
	stroke-width: 1;
	stroke-dasharray: 4 3;
	vector-effect: non-scaling-stroke;
}

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

.fomo-kgv-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);
}

.fomo-kgv-label {
	position: absolute;
	transform: translateY(-50%);
	font-size: var(--txt-xs);
	white-space: nowrap;
	background: var(--flaeche);
	padding: 0 .25rem;
}

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

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

.fomo-kgv-xachse {
	grid-column: 2;
	position: relative;
	height: 1.25rem;
	margin-top: .15rem;
}

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

/* Legendensymbol für die Linie — fomo-stil.css hat Punkt, Strich, Fläche und
   Schiene, aber keine Datenlinie. */
.fomo-kgv-legende-linie {
	display: inline-block;
	width: 18px;
	height: 0;
	border-top: 2px solid var(--navy);
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   PEG je Geschäftsjahr — waagrechte Balken mit Marke bei 1
   --------------------------------------------------------------------------- */
.fomo-kgv-pegverlauf {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: .6rem;
}

.fomo-kgv-pegzeile {
	display: grid;
	grid-template-columns: 3.4rem 1fr 3.6rem;
	align-items: center;
	gap: .6rem;
	padding: .25rem 0;
	font-size: var(--txt-sm);
}

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

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

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

/* Die Marke bei PEG 1 — Lynchs „fair". Gold wie die Heute-Marke der Bänder,
   damit sie als Bezugspunkt und nicht als Datenwert gelesen wird. */
.fomo-kgv-pegeins {
	position: absolute;
	top: -3px;
	bottom: -3px;
	width: 2px;
	margin-left: -1px;
	background: var(--gold);
}

.fomo-kgv-pegwert {
	text-align: right;
	font-weight: 600;
	color: var(--navy);
	font-variant-numeric: tabular-nums;
}

.fomo-kgv-pegwert.leer,
.fomo-kgv-peggrund { color: var(--grau); font-weight: 400; }

.fomo-kgv-peggrund { font-size: var(--txt-xs); font-style: italic; }

/* ---------------------------------------------------------------------------
   KGV je Geschäftsjahr — Tabelle wie die Ausschüttungen der Dividendenseite
   --------------------------------------------------------------------------- */
.fomo-kgv-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--txt-sm);
}

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

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

.fomo-kgv-tabelle td:first-child,
.fomo-kgv-tabelle th:first-child { text-align: left; font-weight: 600; color: var(--navy); }

/* Farbregel des Projekts: Absolutwerte schwarz, Veränderungen farbig. */
.fomo-kgv-tabelle td.gut      { color: var(--gut); }
.fomo-kgv-tabelle td.schlecht { color: var(--schlecht); }

.fomo-kgv-leise,
.fomo-kgv-whg { color: var(--grau); font-size: var(--txt-xs); }

.fomo-kgv-stern {
	color: var(--grau);
	font-weight: 400;
	margin-left: .15em;
}

/* ---------------------------------------------------------------------------
   Kurz erklärt
   --------------------------------------------------------------------------- */
/* Die h3 hier tragen die gemeinsame Form aus fomo-stil.css. */
.fomo-kgv-erklaert p {
	margin: 0;
	line-height: 1.6;
	color: var(--text);
	font-size: var(--txt-lauf);
	max-width: var(--lesebreite);
}

@media (max-width: 600px) {
	.fomo-kgv-chart { grid-template-columns: 2.6rem 1fr; padding-right: .5rem; }
	.fomo-kgv-yachse,
	.fomo-kgv-feld  { height: 180px; }
	.fomo-kgv-pegzeile {
		grid-template-columns: 2.9rem 1fr 3rem;
		gap: .4rem;
		font-size: var(--txt-xs);
	}
}