/* ===================================================================
   Ergänzendes CSS nur für die Quartalszahlen-Seite.

   Steht bewusst nicht in fomo-stil.css: Diese Regeln braucht keine
   andere Seite, und das gemeinsame Stylesheet liegt auf allen 282
   Übersichtsseiten. Wird NACH fomo-stil.css geladen und benutzt
   dessen Farbvariablen.
   =================================================================== */

/* Nächster Termin.

   Die frühere Karte (.fomo-termin, -datum, -rest) ist entfallen: Sie stand als
   kräftige Box über einer Aufzählung mit zwei Punkten, die teilweise dasselbe
   sagten. Beides zusammen liegt jetzt in drei Kacheln, in derselben
   Bildsprache wie der Seitenkopf. */
.fomo-termin-offen { font-size: var(--txt-md); color: var(--grau); }

/* Unterzeile einer Abschnitts-Überschrift — ordnet ein, was darunter steht.
   Beim Termin trägt sie die Berichtsperiode, die für alle drei Kacheln gilt
   und deshalb in keine einzelne gehört. */
.fomo-abschnitt-unterzeile {
	margin: -.35rem 0 .9rem;
	font-size: var(--txt-md);
	color: var(--grau);
}

/* Die Übersicht setzt gut/schlecht bereits auf .fomo-leitkurs-delta, ohne dass
   dazu eine Farbregel existiert. Auf dieser Seite trägt das Delta die Aussage,
   deshalb hier ergänzt — wirkt nur auf der Quartalsseite. */
.fomo-leitkurs-delta.gut      { color: var(--gut); }
.fomo-leitkurs-delta.schlecht { color: var(--schlecht); }

/* Überraschungsverlauf: eine Zeile je Bericht, Nulllinie in der Mitte.
   Bewusst ohne Chart-Bibliothek — reine CSS-Balken sind hier leichter,
   funktionieren ohne JavaScript und brauchen keine Lizenzklärung. */
.fomo-ue { display: flex; flex-direction: column; gap: 1px;
	background: var(--linie); border: 1px solid var(--linie);
	border-radius: var(--r-m); overflow: hidden; }
.fomo-ue-zeile {
	display: grid; align-items: center; gap: .75rem;
	grid-template-columns: 4.6rem 1fr 4.2rem 4.6rem;
	background: #fff; padding: .5rem .9rem; font-size: var(--txt-sm);
}
.fomo-ue-periode { font-weight: 600; color: var(--navy); white-space: nowrap; }
.fomo-ue-schiene { position: relative; height: 16px; border-radius: var(--r-s);
	background: var(--flaeche); min-width: 60px; }
.fomo-ue-schiene::before {
	content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px;
	width: 1px; background: #c7d3e6;
}
.fomo-ue-balken { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; }
.fomo-ue-balken.gut      { left: 50%;  background: var(--gut); }
.fomo-ue-balken.schlecht { right: 50%; background: var(--schlecht); }

/* Balken, die über den Maßstab hinausgehen, laufen am Ende aus statt bündig
   abzuschließen — sonst sähe eine Überraschung von +247 % (ABB, Q4 2021:
   Verkaufsgewinne) genauso aus wie eine von +25 %. Die Zahl daneben nennt
   weiterhin den echten Wert. */
.fomo-ue-balken.gekappt.gut {
	border-top-right-radius: 0; border-bottom-right-radius: 0;
	-webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%);
	        mask-image: linear-gradient(to right, #000 78%, transparent 100%);
}
.fomo-ue-balken.gekappt.schlecht {
	border-top-left-radius: 0; border-bottom-left-radius: 0;
	-webkit-mask-image: linear-gradient(to left, #000 78%, transparent 100%);
	        mask-image: linear-gradient(to left, #000 78%, transparent 100%);
}
.fomo-ue-wert     { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fomo-ue-reaktion { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fomo-ue-wert.gut,      .fomo-ue-reaktion.gut      { color: var(--gut); }
.fomo-ue-wert.schlecht, .fomo-ue-reaktion.schlecht { color: var(--schlecht); }
.fomo-ue-wert.leer,     .fomo-ue-reaktion.leer     { color: var(--grau); }
.fomo-ue-kopf {
	display: grid; align-items: center; gap: .75rem;
	grid-template-columns: 4.6rem 1fr 4.2rem 4.6rem;
	background: var(--flaeche); padding: .45rem .9rem;
	font-size: var(--txt-xs); color: var(--grau); text-transform: uppercase;
	letter-spacing: .03em;
}
.fomo-ue-kopf span:nth-child(3), .fomo-ue-kopf span:nth-child(4) { text-align: right; }

/* Auf schmalen Geräten trägt die Schiene keine Aussage mehr — sie weicht,
   die Zahlen bleiben. Besser als eine Grafik, die man nicht lesen kann. */
@media (max-width: 600px) {
	.fomo-ue-zeile, .fomo-ue-kopf { grid-template-columns: 4.4rem 1fr 4.4rem; }
	.fomo-ue-schiene { display: none; }
	.fomo-ue-kopf span:nth-child(2) { display: none; }
}

/* Terminhistorie */
.fomo-termine { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); }
.fomo-termine th, .fomo-termine td {
	padding: .5rem .7rem; text-align: right; font-variant-numeric: tabular-nums;
	border-bottom: 1px solid var(--linie); white-space: nowrap;
}
.fomo-termine thead th {
	font-weight: 600; color: var(--grau); font-size: var(--txt-xs);
	border-bottom: 2px solid var(--linie);
}
.fomo-termine td:first-child, .fomo-termine th:first-child,
.fomo-termine td:nth-child(2), .fomo-termine td:nth-child(3) { text-align: left; }
.fomo-termine td.gut      { color: var(--gut); }
.fomo-termine td.schlecht { color: var(--schlecht); }

/* Zwischenüberschriften über den aufklappbaren Berichten */
.fomo-berichtstitel {
	font-size: 1.02rem; margin: 1.6rem 0 .1rem; color: var(--navy);
}

/* Umschalter für die vollständigen Berichtstabellen.
   Bewusst als eigene Regel und nicht über .fomo-chart-btn: Die dortige
   Gestaltung steht im Child-Theme und ist auf `button` gemünzt — ein <a>
   erbt sie nicht. */
.fomo-perioden-schalter { margin: 1.2rem 0 0; }
.fomo-perioden-schalter a {
	display: inline-block; padding: .5rem .9rem;
	border: 1px solid var(--linie); border-radius: var(--r-s);
	background: #fff; color: var(--blau);
	font-size: var(--txt-sm); font-weight: 500; text-decoration: none;
}
.fomo-perioden-schalter a:hover { background: var(--flaeche); text-decoration: none; }
.fomo-perioden-schalter a:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.fomo-perioden-hinweis { font-size: var(--txt-xs); color: var(--grau); margin: .5rem 0 0; }

/* ---------------------------------------------------------------------------
   Rückblick auf den letzten Bericht — der ausformulierte Absatz.

   Grün/Rot wie in der Vorgängerfassung, dort noch als Inline-Farben
   (style="color: green"). Als Klassen sind sie an einer Stelle änderbar und
   benutzen dieselben Farbwerte wie Kacheln und Kursreaktion.
   --------------------------------------------------------------------------- */
.fomo-rueckblick {
	margin: 0;
	padding: 0 0 0 1.15rem;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	font-size: var(--txt-md);
	line-height: 1.55;
	color: var(--navy);
}
.fomo-rueckblick li { margin: 0; }
.fomo-rueckblick strong { font-weight: 600; }
.fomo-rueckblick strong.gut      { color: var(--gut); }
.fomo-rueckblick strong.schlecht { color: var(--schlecht); }

/* ---------------------------------------------------------------------------
   Kacheln dieser Seite: je drei, oben wie beim nächsten Termin.

   Die Breite regelt bereits das auto-fit-Raster in fomo-stil.css. Hier steht
   nur, was diese Seite zusätzlich braucht: Zwei Vergleiche in einer Fußzeile
   brauchen mehr Zeilenluft als eine einzelne Angabe — sie brechen auf
   schmalen Spalten um.
   --------------------------------------------------------------------------- */
.fomo-kacheln .fomo-kachel-fuss { line-height: 1.5; }

/* Die Vergleichswerte in der Fußzeile. Der Wert darüber bleibt schwarz —
   farbig ist nur die Veränderung. */
.fomo-kachel-delta { font-weight: 600; }
.fomo-kachel-delta.gut      { color: var(--gut); }
.fomo-kachel-delta.schlecht { color: var(--schlecht); }

/* Kursreaktion im Kopf, neben der Überraschung: Marktreaktion statt
   Unternehmenszahl — deshalb oben und nicht zwischen den Kacheln. */
.fomo-kopf-reaktion {
	display: flex; flex-direction: column; gap: .1rem;
	justify-content: center;
}
.fomo-kopf-reaktion-wert {
	font-size: 1.35rem; font-weight: 700; line-height: 1.2;
}
.fomo-kopf-reaktion-wert.gut      { color: var(--gut); }
.fomo-kopf-reaktion-wert.schlecht { color: var(--schlecht); }

/* Abgeleiteter Zeitpunkt: gedämpft, damit er sich von den überlieferten
   Angaben unterscheidet, ohne die Tabelle unruhig zu machen. Der Stern und
   die Fußnote darunter sagen, was gemeint ist. */
.fomo-abgeleitet { color: var(--grau); }
.fomo-abgeleitet sup { font-size: .7em; }

.fomo-tabellen-fussnote {
	margin: .6rem 0 0;
	font-size: var(--txt-xs);
	color: var(--grau);
	line-height: 1.5;
}