/* ===================================================================
   Das gemeinsame Seiten-CSS der Aktienseiten.

   Eine einzige Quelle für Übersicht und alle Unterseiten — damit der
   Wechsel zwischen ihnen visuell nahtlos bleibt und eine Farb- oder
   Abstandsänderung nicht an zwei Stellen gepflegt werden muss.

   Wird über fomo-assets.php per wp_enqueue_style eingebunden, nicht
   mehr in die Seite hineingeschrieben: So landet die Datei im Browser-
   Cache und wird beim Klick zur nächsten Aktie nicht erneut übertragen.
   =================================================================== */

/* ===================================================================
   Eigenständiges Layout für die Aktienseite.

   Bewusst OHNE die Raster-Klassen von GeneratePress und Getwid
   (gb-container, gb-grid-wrapper …): Deren Breiten- und Grid-Regeln
   stammen aus dem Theme, lassen sich von hier aus nicht sicher
   überschreiben, und eine 27 Spalten breite Kennzahlentabelle sprengte
   damit das Seitenlayout. Alles hier steht für sich und kollidiert mit
   nichts.

   Ein Layout für alle Bildschirmgrößen — das doppelte Desktop- und
   Mobil-HTML der alten Seite entfällt damit ersatzlos.
   =================================================================== */
.fomo-seite {
	/* Farben */
	--blau: #3066b2;
	--navy: #1A2D4A;
	--hell: #F0F4FA;
	--gold: #F5B93A;
	--grau: #5a6b85;
	--gut: #15803d;
	--schlecht: #b91c1c;
	/* Haarlinie und Ruhefläche: heller als zuvor (#dce5f3), damit Raster
	   die Zahlen nicht überstimmen. Linien sollen gliedern, nicht rahmen. */
	--linie: #e4ebf5;
	--flaeche: #f7f9fc;

	/* Schriftstufen in PIXEL, nicht in rem.
	   `rem` bezieht sich auf die Schriftgröße des Dokuments (html), nicht auf
	   die 16px unten in diesem Block. Setzt das Theme dort einen größeren
	   Wert, wachsen alle Bedienelemente mit — genau daran wirkten die Buttons
	   trotz gleicher Zahlen größer als im Entwurf. Pixel sind hier das
	   Mittel der Wahl: Diese Sektion soll unabhängig vom Theme aussehen. */
	--txt-xs: 12px;
	--txt-sm: 13px;
	--txt-md: 15px;

	/* Radien: klein für Bedienelemente, mittel für Flächen */
	--r-s: 5px;
	--r-m: 8px;

	max-width: 100%;
	min-width: 0;
	color: var(--navy);

	/* Eigene Schriftbasis — der wichtigste Wert in diesem Block.
	   Das Theme setzt 17px auf den Body. Alle Elemente hier ohne eigene
	   Größe erbten das und wirkten dadurch deutlich größer und gedrängter
	   als im Entwurf, der auf 16px lief. Mit einer festen Basis auf der
	   Sektion greifen die Größen unten so, wie sie gemeint sind —
	   unabhängig davon, was das Theme oder ein Plugin vorgibt. */
	font-size: 16px;
	line-height: 1.6;
}
.fomo-seite *, .fomo-seite *::before, .fomo-seite *::after { box-sizing: border-box; }

/* Kopfzeile: Leitzahl links, Qualitätsprüfung rechts. */
.fomo-kopfzeile {
	display: flex; flex-wrap: wrap; gap: 1.25rem;
	justify-content: space-between; align-items: flex-start;
	margin-bottom: 1.25rem;
}

/* Leitzahl — der Kurs führt, alles andere ordnet sich unter.
   Zwei Spalten: Logo links, darin rechts Kurszeile über Fußzeile. */
.fomo-leitkurs {
	display: flex; align-items: stretch;
	gap: 1.6rem; flex: 1 1 260px;
}
.fomo-leitkurs-block {
	display: flex; flex-direction: column; justify-content: center;
	gap: .15rem; min-width: 0;
}
.fomo-leitkurs-zeile {
	display: flex; align-items: baseline; flex-wrap: wrap;
	gap: .5rem .9rem;
}
/* Höhe = Kurszeile + Abstand + Fußzeile, also genau die Spalte daneben:
   2.6rem (Kurs, Zeilenhöhe 1) + .15rem (Abstand) + 19px (Fußzeile, 12px
   mal Zeilenhöhe 1.6). Bewusst nicht `align-self: stretch` — Bilder werden
   dabei zwar auf die Höhe gezogen, behalten aber ihre natürliche Breite,
   was je nach Logo unterschiedlich breite Leerränder ergäbe. Mit gesetzter
   Höhe und `width: auto` rechnet der Browser die Breite aus dem
   Seitenverhältnis. Der rem-Anteil wächst mit der Schriftgröße des Themes
   mit, was hier nötig ist, weil die Seite deren Wurzelwert erbt. */
/* Absichtlich `.fomo-seite img.fomo-logo` statt nur `.fomo-logo`: Themes
   setzen für Bilder üblicherweise `.entry-content img { height: auto }`, und
   diese Regel wiegt schwerer als eine einzelne Klasse. Das Logo erschiene
   sonst in seiner natürlichen Größe — beim beschnittenen ABB-Logo wären das
   89x36 Pixel, also winzig. Gleiche Ursache wie seinerzeit bei den
   Chart-Buttons, die `button.fomo-chart-btn` brauchen. */
.fomo-seite img.fomo-logo {
	align-self: center;
	/* Der Faktor ist der einzige Stellwert für die Logogröße: 1 entspräche
	   exakt der Höhe der Textspalte. Seit der Rand beim Spiegeln entfernt
	   wird, füllt die Marke ihren Kasten aus und wirkte bei 1 zu wuchtig.
	   0.65 hat einen zweiten Grund: Die Bildquellen sind klein — ABBs Marke
	   misst 36 Pixel in der Höhe, bei 74 Pixeln Anzeige wäre sie sichtbar
	   unscharf hochgerechnet.
	   `max-width` begrenzt breite Schriftzüge wie Nestlé; die werden dann
	   breiten- statt höhenbegrenzt und fallen etwas flacher aus. */
	height: calc((2.75rem + 19px) * .65);
	width: auto;
	max-width: 150px;
	object-fit: contain;
	flex: 0 0 auto;
}

/* Qualitätsprüfung als eigenes Element statt als Kachel unter Kacheln:
   Es ist das Alleinstellungsmerkmal der Seite — sieben eigene Prüfungen,
   die kein anderes Portal kostenlos zeigt. Der Ring füllt sich anteilig
   (conic-gradient), sodass 6 von 7 auch ohne Lesen erkennbar ist. */
/* Gleiche Breite wie das Suchfeld darüber. Beide stehen rechtsbündig
   untereinander; unterschiedliche Breiten ergäben eine gezackte linke
   Kante, die man sieht, ohne sie benennen zu können. */
.fomo-score {
	display: flex; align-items: center; gap: .85rem;
	flex: 0 1 320px; min-width: 260px;
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: var(--r-m);
	padding: .7rem 1.1rem .7rem .8rem;
	text-decoration: none; color: inherit;
	transition: border-color .12s ease, background-color .12s ease;
}
.fomo-score:hover {
	border-color: var(--ampel, var(--gold));
	background: #fff;
}
/* Ampelfarbe des Rings — dieselbe Aussage wie die Zahl daneben, nicht
   Dekoration. Der Wert steht immer dabei, damit die Information nicht
   allein an der Farbe hängt. */
.fomo-score-gut     { --ampel: var(--gut); }
.fomo-score-mittel  { --ampel: #d97706; }
.fomo-score-schwach { --ampel: var(--schlecht); }
.fomo-score-ring {
	position: relative; flex: 0 0 auto;
	width: 52px; height: 52px; border-radius: 50%;
	background: conic-gradient(var(--ampel, var(--gold)) var(--fuellung, 0deg), var(--linie) 0);
	display: grid; place-items: center;
}
.fomo-score-ring::after {
	content: ""; position: absolute; inset: 4px;
	background: var(--flaeche); border-radius: 50%;
}
.fomo-score:hover .fomo-score-ring::after { background: #fff; }
.fomo-score-zahl {
	position: relative; z-index: 1;
	font-size: 1.15rem; font-weight: 700; line-height: 1;
	font-variant-numeric: tabular-nums;
}
.fomo-score-max { font-size: .7rem; color: var(--grau); font-weight: 400; }
.fomo-score-text { display: flex; flex-direction: column; line-height: 1.35; }
.fomo-score-text strong { font-size: var(--txt-sm); }
.fomo-score-text span { font-size: var(--txt-xs); color: var(--grau); }
.fomo-leitkurs-zahl {
	font-size: 2.6rem; font-weight: 650; line-height: 1;
	letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.fomo-leitkurs-waehrung { font-size: 1rem; color: var(--grau); }
.fomo-leitkurs-delta {
	font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.fomo-leitkurs-zusatz { color: var(--grau); font-weight: 400; }
/* Kein `flex-basis: 100%` mehr — der erzwungene Umbruch stammt aus der
   früheren einzeiligen Anordnung. In der Spalte steht die Fußzeile ohnehin
   unter dem Kurs, und dort hieße `flex-basis` volle HÖHE. */
.fomo-leitkurs-fuss {
	font-size: var(--txt-xs); color: var(--grau);
}

/* Einordnung — der Absatz, der die Zahlen darüber in Worte fasst.
   Volle Breite: schmaler als die Kachelreihe darüber wirkte er abgeschnitten. */
.fomo-einordnung {
	background: var(--flaeche);
	border-left: 3px solid var(--gold);
	border-radius: var(--r-s);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0 0;
	font-size: var(--txt-md);
}

/* Kennzahlenreihe als gerahmter Block mit abgerundeten Ecken — wie im
   Nestlé-Entwurf. Die 1px-Lücken im Grid erzeugen die Trennlinien, ohne
   dass jede Kachel einen eigenen Rahmen braucht. */
.fomo-kacheln {
	display: grid; gap: 1px; background: var(--linie);
	grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
	border: 1px solid var(--linie);
	border-radius: var(--r-m);
	overflow: hidden;
}
.fomo-kachel {
	background: #fff;
	padding: .8rem .95rem;
	display: flex; flex-direction: column; gap: .1rem;
}
.fomo-kachel-label { font-size: var(--txt-xs); color: var(--grau); }
.fomo-kachel-wert {
	font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums;
	line-height: 1.3;
}
.fomo-kachel-wert.gut { color: var(--gut); }
.fomo-kachel-wert.schlecht { color: var(--schlecht); }
.fomo-kachel-einheit { font-size: var(--txt-xs); font-weight: 400; color: var(--grau); margin-left: .25em; }
.fomo-kachel-fuss { font-size: var(--txt-xs); color: var(--grau); }

.fomo-hinweis {
	margin-top: 3rem; padding-top: 1rem;
	border-top: 1px solid var(--linie);
	font-size: var(--txt-xs); color: var(--grau);
}

/* Kopfzeile: Unterseiten links, Suche rechts — beides über allem anderen. */
.fomo-seitenkopf {
	display: flex; flex-wrap: wrap; gap: .8rem 1.5rem;
	align-items: center; justify-content: space-between;
	padding-bottom: .9rem; margin-bottom: 1.4rem;
	border-bottom: 1px solid var(--linie);
}
.fomo-unterseiten { display: flex; flex-wrap: wrap; gap: .3rem; }
.fomo-unterseite {
	font-size: var(--txt-sm); font-weight: 600; text-decoration: none;
	padding: 5px 12px; border-radius: var(--r-s);
	color: var(--blau); background: var(--hell);
	transition: background-color .12s ease;
}
.fomo-unterseite:hover { background: #e3ebf7; }
/* Die aktuelle Seite ist kein Verweis, sondern eine Standortangabe. */
.fomo-unterseite.aktiv { background: var(--blau); color: #fff; }
.fomo-unterseite:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* Suche prominent: eigene Breite, größeres Feld als die Bedienknöpfe. */
.fomo-kopfsuche { flex: 0 1 320px; min-width: 220px; }
.fomo-kopfsuche input[type="text"],
.fomo-kopfsuche input[type="search"] {
	width: 100%; font-size: var(--txt-md); padding: 9px 13px;
	border: 1px solid var(--linie); border-radius: var(--r-s);
	background: #fff;
}
.fomo-kopfsuche input:focus {
	outline: none; border-color: var(--blau);
	box-shadow: 0 0 0 3px rgba(48, 102, 178, .12);
}

/* Sprungmarken innerhalb der Seite, mit Pfeil als Wegweiser nach unten. */
.fomo-sprungmarken {
	display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
	margin-top: 1.6rem; padding: .75rem 0;
	border-top: 1px solid var(--linie);
	border-bottom: 1px solid var(--linie);
	font-size: var(--txt-sm);
}
.fomo-sprungmarken a {
	color: var(--grau); text-decoration: none; white-space: nowrap;
	transition: color .12s ease;
}
.fomo-sprungmarken a:hover { color: var(--blau); text-decoration: underline; }
.fomo-sprungmarken a:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

@media (max-width: 720px) {
	.fomo-kopfsuche { flex: 1 1 100%; }
}

/* Ein Abstandsmaß für alle Abschnitte statt der gewachsenen Einzelwerte.
   scroll-margin-top hält Überschriften bei Ankersprüngen unter der
   fixierten Kopfzeile der Website frei. */
.fomo-abschnitt { margin-top: 3rem; min-width: 0; scroll-margin-top: 5rem; }
.fomo-abschnitt > h2 {
	font-size: 1.3rem; margin: 0 0 .5rem; line-height: 1.3;
	padding-bottom: .5rem; border-bottom: 1px solid var(--linie);
}
.fomo-abschnitt > h3 { font-size: 1.02rem; margin: 1.75rem 0 .6rem; }
.fomo-intro { color: var(--grau); margin: 0 0 1.3rem; max-width: 68ch;
	font-size: var(--txt-md); }
/* Einzelne Einleitungen dürfen die Lesebreite überschreiten, wenn sie
   über einer Tabelle stehen, die ohnehin die volle Breite nutzt. */
.fomo-intro-breit { max-width: none; }

/* Wertentwicklung — derselbe gerahmte Block wie die Kacheln */
.fomo-perf {
	display: grid; gap: 1px; background: var(--linie);
	grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
	border: 1px solid var(--linie);
	border-radius: var(--r-m);
	overflow: hidden;
}
.fomo-perf-eintrag {
	background: #fff;
	padding: .7rem .85rem;
	display: flex; flex-direction: column; gap: .05rem;
}
.fomo-perf-label { font-size: var(--txt-xs); color: var(--grau); }
.fomo-perf-wert { font-size: .98rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fomo-perf-wert.gut { color: var(--gut); }
.fomo-perf-wert.schlecht { color: var(--schlecht); }
.fomo-tech { margin-top: 1.75rem; }

/* Stammdaten in drei thematischen Blöcken nebeneinander. Zehn gleichrangige
   Zeilen ohne Gliederung wirkten dünn; gruppiert trägt sich die Fläche. */
.fomo-infobloecke {
	display: grid; gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.fomo-infoblock h3 {
	font-size: var(--txt-xs); letter-spacing: .08em; text-transform: uppercase;
	color: var(--blau); font-weight: 700; margin: 0 0 .5rem;
}
/* In den schmalen Blöcken steht je Zeile nur ein Paar, deshalb einspaltig. */
.fomo-dl-eng { grid-template-columns: 1fr !important; }

.fomo-dl { margin: 0; display: grid; gap: 1px; background: var(--linie);
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	border: 1px solid var(--linie); border-radius: var(--r-m); overflow: hidden; }
.fomo-dl > div { background: #fff; padding: .6rem .9rem; display: flex;
	justify-content: space-between; gap: 1rem; align-items: baseline; }
.fomo-dl dt { color: var(--grau); font-size: var(--txt-sm); margin: 0; }
.fomo-dl dd { margin: 0; font-weight: 500; text-align: right;
	font-size: var(--txt-sm); font-variant-numeric: tabular-nums; }

/* Legende — zeigt dieselben Bauteile, die in den Balken darunter vorkommen. */
.fomo-legende {
	list-style: none; padding: .9rem 1.1rem; margin: 0 0 1.6rem;
	background: var(--flaeche); border: 1px solid var(--linie);
	border-radius: var(--r-m);
	display: grid; gap: .55rem;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	font-size: var(--txt-sm);
}
.fomo-legende li { display: flex; align-items: center; gap: .7rem; }
.fomo-legende-symbol {
	flex: 0 0 auto; width: 44px; height: 20px; position: relative;
	background: var(--hell); border-radius: 3px;
}
.fomo-legende-punkt {
	position: absolute; top: 50%; left: 50%; width: 13px; height: 13px;
	margin: -6.5px 0 0 -6.5px; background: var(--gold);
	border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--navy);
}
.fomo-legende-strich {
	position: absolute; top: -2px; left: 50%; width: 2px;
	height: calc(100% + 4px); background: var(--navy);
}
.fomo-legende-flaeche {
	position: absolute; top: 0; left: 25%; width: 50%; height: 100%;
	background: #c3d5ee; border-radius: 3px;
}
.fomo-legende-schiene {
	position: absolute; inset: 0; border-radius: 3px;
	background: var(--hell); border: 1px dashed #a8bdd9;
}

/* Bewertungsbänder */
.fomo-band { margin-bottom: 1.8rem; }
.fomo-band-deutung {
	margin: .45rem 0 0; font-size: var(--txt-sm); color: var(--grau);
}
.fomo-band-deutung strong { color: var(--navy); }

/* Sektor-Umschalter: nutzt dieselben Knopfregeln wie die Charts, damit die
   Seite ein Bedienmuster hat statt mehrerer. */
.fomo-peer-umschalter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.fomo-peer-ansicht { display: none; }
.fomo-peer-ansicht.aktiv { display: block; }
.fomo-peer-land { color: var(--grau); white-space: nowrap; }
.fomo-peer-hinweis { margin-top: .8rem; font-size: var(--txt-xs); color: var(--grau); }

/* Sektor-Vergleich */
.fomo-peer { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); }
.fomo-peer th, .fomo-peer td {
	padding: .5rem .7rem; text-align: right; font-variant-numeric: tabular-nums;
	border-bottom: 1px solid var(--linie); white-space: nowrap;
}
.fomo-peer thead th {
	font-weight: 600; color: var(--grau); font-size: var(--txt-xs);
	border-bottom: 2px solid var(--linie);
}
.fomo-peer tbody th { text-align: left; font-weight: 500; white-space: normal; }
.fomo-peer tbody th a { color: var(--blau); }
.fomo-peer-selbst { background: #fdf6e6; }
.fomo-peer-selbst th { font-weight: 700; }
.fomo-peer-median { color: var(--grau); }
.fomo-peer-median th { font-weight: 500; font-style: italic; }
.fomo-band-kopf { display: flex; justify-content: space-between;
	align-items: baseline; margin-bottom: .4rem; }
.fomo-band-label { font-weight: 600; font-size: var(--txt-md); }
.fomo-band-heute { font-size: .88rem; color: var(--grau); }
.fomo-band-schiene { position: relative; height: 26px; background: var(--hell);
	border-radius: 4px; }
.fomo-band-quartil { position: absolute; top: 0; height: 100%;
	background: #c3d5ee; border-radius: 3px; }
.fomo-band-median { position: absolute; top: -3px; height: calc(100% + 6px);
	width: 2px; background: var(--navy); }
.fomo-band-marke { position: absolute; top: 50%; width: 14px; height: 14px;
	margin: -7px 0 0 -7px; background: var(--gold); border: 2px solid #fff;
	border-radius: 50%; box-shadow: 0 0 0 1px var(--navy); }
.fomo-band-fuss { display: flex; justify-content: space-between; font-size: var(--txt-xs);
	color: var(--grau); margin-top: .3rem; font-variant-numeric: tabular-nums; }

/* Qualitätsprüfung */
.fomo-qc { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px;
	background: var(--linie); border: 1px solid var(--linie);
	border-radius: var(--r-m); overflow: hidden; }
.fomo-qc li { display: flex; align-items: center; gap: .7rem; background: #fff;
	padding: .7rem 1rem; font-size: var(--txt-md); }
.fomo-qc-icon { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
	position: relative; }
.fomo-qc li.erfuellt .fomo-qc-icon { background: var(--gut); }
.fomo-qc li.offen .fomo-qc-icon { background: #cbd5e1; }
.fomo-qc-icon::after { position: absolute; inset: 0; display: flex;
	align-items: center; justify-content: center; color: #fff; font-size: 12px;
	font-weight: 700; }
.fomo-qc li.erfuellt .fomo-qc-icon::after { content: "\2713"; }
.fomo-qc li.offen .fomo-qc-icon::after { content: "\2013"; }
.fomo-qc-text { flex: 1; }
.fomo-qc-status { font-size: var(--txt-xs); color: var(--grau); white-space: nowrap; }

/* Finanzberichte — die alten Tabellen dürfen seitlich scrollen */
.fomo-breit { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }
.fomo-breit table { min-width: 100%; }

/* Aufklappbare Berichte, gleiche Form wie in der Kennzahlen-Sektion */
/* Kein border-top: Die Abschnittsüberschrift darüber bringt bereits
   eine Linie mit. Zwei direkt untereinander lasen sich als Fehler. */
.fomo-bericht { margin-top: 1rem; }
.fomo-bericht summary {
	cursor: pointer; font-size: var(--txt-sm); color: var(--blau);
	font-weight: 500;
}
.fomo-bericht summary:hover { text-decoration: underline; }
.fomo-bericht summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.fomo-bericht .fomo-breit { margin-top: .9rem; }

/* ---------------------------------------------------------------------
   Die drei Abschlusstabellen kommen aus den alten Includes und tragen die
   Klasse `.aktienkennzahlen-tabelle`, deren Gestaltung im Child-Theme
   steht (feste 14px, eigener Scrollbalken, ein „⇠⇢ Wischen"-Hinweis per
   ::after). Diese Datei gehört nicht zum Projekt, deshalb wird sie hier
   überschrieben — mit einem zusätzlichen Vorfahren im Selektor, was die
   Spezifität von 0,1,0 auf 0,2,0 hebt und damit gewinnt.
   --------------------------------------------------------------------- */
.fomo-seite .aktienkennzahlen-tabelle {
	font-size: var(--txt-sm);
	overflow-x: auto;
	border: 1px solid var(--linie);
	border-radius: var(--r-s);
	scrollbar-width: thin;
}
/* Der Wischhinweis des Themes entfällt: Der Rahmen zeigt den Scrollbereich
   bereits an, und auf dem Schreibtisch ergibt „Wischen" keinen Sinn. */
.fomo-seite .aktienkennzahlen-tabelle::after { content: none; }
.fomo-seite .aktienkennzahlen-tabelle::-webkit-scrollbar { height: 8px; }
.fomo-seite .aktienkennzahlen-tabelle::-webkit-scrollbar-thumb {
	background: #c3d5ee; border-radius: 4px;
}
.fomo-seite .aktienkennzahlen-tabelle table {
	border-collapse: collapse; width: max-content; min-width: 100%;
}
.fomo-seite .aktienkennzahlen-tabelle th,
.fomo-seite .aktienkennzahlen-tabelle td {
	padding: .42em .7em; text-align: right; border: none;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fomo-seite .aktienkennzahlen-tabelle thead th {
	background: #fff; font-weight: 600; color: var(--grau);
	font-size: var(--txt-xs); border-bottom: 2px solid var(--linie);
}
.fomo-seite .aktienkennzahlen-tabelle tbody td:first-child,
.fomo-seite .aktienkennzahlen-tabelle tbody th {
	text-align: left; font-weight: 500;
}
/* Zebrastreifen statt Linie unter jeder Zeile — bei bis zu 28 Spalten
   führt das Auge besser über die Breite. */
.fomo-seite .aktienkennzahlen-tabelle tbody tr:nth-child(even) {
	background: rgba(48, 102, 178, .025);
}


@media (prefers-reduced-motion: reduce) {
	.fomo-score { transition: none; }
}

@media (max-width: 640px) {
	.fomo-leitkurs-zahl { font-size: 2.1rem; }
	.fomo-kopfzeile { gap: 1rem; }
	.fomo-score { width: 100%; }
	.fomo-abschnitt { margin-top: 2.2rem; }
	.fomo-abschnitt > h2 { font-size: 1.15rem; }
	.fomo-dl > div { flex-direction: column; gap: .1rem; }
	.fomo-dl dd { text-align: left; }
}