/* =======================================================
   Ribafrei Invest
   Nutzt die Design-Tokens des Child Themes (:root in style.css).
   Bewusst keine grosse Ampel: Statusfarben markieren, sie urteilen nicht.
   ======================================================= */

/*
 * ABSTAND ZUR BREADCRUMB-LEISTE
 *
 * Die Invest-Vorlagen geben `.rfi-page` unmittelbar in `.site-content` aus
 * und nicht in den `.inside-article`-Block, den GeneratePress in der
 * Einstellung "separate containers" sonst mit Innenabstand versieht. Sie
 * bekommen dessen Abstand deshalb nicht - der Inhalt begann bisher direkt
 * unter der Trennlinie der Breadcrumb.
 *
 * 40px ist der Wert, den GeneratePress fuer diesen Block vorsieht; die Seite
 * steht damit im selben Raster wie der uebrige Bestand und nicht in einem
 * eigenen. Auf schmalen Bildschirmen die Haelfte - dort ist Hoehe knapp.
 */
.rfi-page {
  padding: 40px 20px 0;
}

@media (max-width: 768px) {
  .rfi-page {
    padding-top: 22px;
  }
}

.rfi-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.rfi-identity {
  font-size: 1.05rem;
  margin: 0 0 .25em;
}

.rfi-ticker {
  font-weight: 700;
  color: var(--color-primary, #1F3C77);
  letter-spacing: .04em;
}

.rfi-sep {
  color: var(--color-medium, #555);
  margin: 0 .4em;
}

.rfi-datastate {
  color: var(--color-medium, #555);
  margin: 0 0 1.2em;
}

.rfi-note {
  border-left: 4px solid var(--color-accent, #3DAED2);
  background: var(--color-light, #F5F7FA);
  padding: .9em 1.1em;
  margin: 0 0 2em;
  line-height: 1.55;
}

.rfi-standard {
  margin: 0 0 2.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #e3e7ee;
}

.rfi-version {
  color: var(--color-medium, #555);
  font-size: .92rem;
  margin: 0 0 .6em;
}

.rfi-flag {
  display: inline-block;
  margin-left: .5em;
  padding: .1em .5em;
  border: 1px solid var(--color-warning, #E5B83E);
  border-radius: 3px;
  font-size: .8rem;
  color: #7a5c00;
  background: #fdf7e3;
}

.rfi-overall {
  font-weight: 600;
  padding: .55em .85em;
  border-radius: 4px;
  display: inline-block;
  margin: 0 0 1em;
  background: var(--color-light, #F5F7FA);
  border-left: 4px solid var(--color-medium, #555);
}

.rfi-status-pass    { border-left-color: var(--color-success, #238E57); }
.rfi-status-fail    { border-left-color: var(--color-error, #C0392B); }
.rfi-status-review  { border-left-color: var(--color-warning, #E5B83E); }
.rfi-status-unknown { border-left-color: var(--color-medium, #555); }

.rfi-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rfi-criteria,
.rfi-metrics {
  width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  min-width: 620px;
}

.rfi-criteria th,
.rfi-criteria td,
.rfi-metrics th,
.rfi-metrics td {
  text-align: left;
  padding: .6em .7em;
  border-bottom: 1px solid #e3e7ee;
  vertical-align: top;
}

.rfi-criteria th,
.rfi-metrics th {
  background: var(--color-light, #F5F7FA);
  color: var(--color-primary, #1F3C77);
  font-weight: 600;
}

.rfi-rule-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  color: var(--color-medium, #555);
}

.rfi-criteria td.rfi-status {
  font-weight: 600;
  border-left: 4px solid transparent;
}

.rfi-calc {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rfi-reason-row td {
  background: #fbfcfe;
  color: var(--color-medium, #555);
  font-size: .88rem;
  border-bottom: 1px solid #e3e7ee;
}

.rfi-explain p {
  line-height: 1.65;
}

.rfi-sources ul {
  line-height: 1.6;
}

.rfi-sources code {
  font-size: .85rem;
}

/* Admin */
.rfi-admin table.widefat td.rfi-cell-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rfi-admin .rfi-badge {
  display: inline-block;
  padding: .1em .5em;
  border-radius: 3px;
  font-size: .82rem;
  border: 1px solid #ccd3de;
  background: #f6f7f9;
}

.rfi-context {
  font-size: .82rem;
  color: var(--color-medium, #555);
}

.rfi-verified {
  display: inline-block;
  margin-left: .5em;
  padding: .1em .5em;
  border: 1px solid var(--color-success, #238E57);
  border-radius: 3px;
  font-size: .8rem;
  color: #17603a;
  background: #eef7f1;
}

.rfi-sourceref {
  font-size: .82rem;
  color: var(--color-medium, #555);
}

.rfi-details {
  margin: .6em 0 0;
}

.rfi-details > summary {
  cursor: pointer;
  color: var(--color-primary, #1F3C77);
  font-size: .9rem;
}

.rfi-details ul {
  margin: .5em 0 0 1.1em;
  font-size: .88rem;
  line-height: 1.5;
}

.rfi-activities {
  margin: 0 0 2.5em;
}

/* =======================================================
   Ergebnisorientierte Seite (Slice 2)

   Drei Ebenen, drei Bloecke, drei visuelle Sprachen:
   Ergebnis = Tabelle, Bandbreite = eingerueckt mit Warnhinweis,
   Methodik = Fliesstext. Wer die Seite ueberfliegt, soll die
   Bandbreitenrechnung nicht fuer ein Ergebnis halten koennen.
   ======================================================= */

.rfi-headline {
  margin: 0 0 1.4em;
}

.rfi-verdicts {
  display: flex;
  flex-wrap: wrap;
  gap: .8em;
  margin: .8em 0 1em;
}

.rfi-verdict {
  flex: 1 1 260px;
  border: 1px solid var(--color-border, #dde2ea);
  border-left-width: 5px;
  border-radius: 4px;
  padding: .8em 1em;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .15em;
}

.rfi-verdict-standard {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-medium, #555);
}

.rfi-verdict-status {
  font-weight: 700;
  font-size: 1.1rem;
}

.rfi-verdict-meta {
  font-size: .82rem;
  color: var(--color-medium, #555);
}

.rfi-verdict.rfi-status-pass    { border-left-color: #2E7D5B; }
.rfi-verdict.rfi-status-fail    { border-left-color: #A6392E; }
.rfi-verdict.rfi-status-review,
.rfi-verdict.rfi-status-unknown { border-left-color: #B8860B; }

.rfi-block {
  margin: 2em 0;
}

.rfi-block-decided .rfi-value,
.rfi-block-decided .rfi-calc {
  white-space: nowrap;
}

.rfi-block-decided .rfi-value {
  font-weight: 700;
}

/* Offene Punkte: Liste statt Tabelle - der Grund ist hier die Hauptsache. */
.rfi-open-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rfi-open-list li {
  border-left: 4px solid #B8860B;
  background: var(--color-light, #F5F7FA);
  padding: .8em 1em;
  margin: 0 0 .7em;
}

.rfi-open-head {
  display: block;
  margin-bottom: .3em;
}

.rfi-open-head .rfi-rule-key {
  margin-left: .5em;
}

.rfi-open-reason {
  display: block;
  color: var(--color-medium, #444);
  font-size: .93rem;
}

/*
 * Begruendung an einem entschiedenen Kriterium. Sie erscheint nur, wo das
 * Ergebnis nicht schon aus der Rechnung folgt - bei einer Dokumentenpruefung
 * wie AAOIFI-BUS-001. Deshalb bewusst dieselbe, zurueckhaltende Auszeichnung
 * wie bei einem offenen Kriterium: sie erklaert, sie wertet nicht.
 */
.rfi-decided-reason {
  display: block;
  margin-top: .35rem;
  color: var(--color-medium, #444);
  font-size: .9rem;
  font-weight: 400;
}

/* Bandbreitenrechnung: sichtbar abgesetzt, nie neben einem Ergebnis. */
.rfi-block-sensitivity {
  border: 1px dashed var(--color-medium, #999);
  border-radius: 4px;
  padding: 1em 1.2em;
  background: #fcfcfd;
}

.rfi-layer-warning {
  border-left: 4px solid #B8860B;
  background: #fff8e6;
  padding: .8em 1em;
  margin: 0 0 1.2em;
  font-size: .93rem;
}

.rfi-sensitivity {
  margin: 0 0 1.6em;
}

.rfi-uncertainty,
.rfi-conclusion {
  font-size: .93rem;
  color: var(--color-medium, #444);
}

.rfi-conclusion {
  border-left: 3px solid var(--color-accent, #3DAED2);
  padding-left: .8em;
  margin-top: .8em;
}

/* Methodik. */
.rfi-methodology-list li {
  margin-bottom: .6em;
  font-size: .93rem;
}

.rfi-pricebox {
  background: var(--color-light, #F5F7FA);
  border: 1px solid var(--color-border, #dde2ea);
  border-radius: 4px;
  padding: 1em 1.2em;
  margin-bottom: 1.4em;
}

.rfi-pricebox h3 {
  margin-top: 0;
}

.rfi-pricebox dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35em 1.2em;
  margin: 0;
}

.rfi-pricebox dt {
  font-weight: 700;
  color: var(--color-medium, #555);
}

.rfi-pricebox dd {
  margin: 0;
}

.rfi-pricebox-note {
  margin: 1em 0 0;
  font-size: .88rem;
  color: var(--color-medium, #555);
}

.rfi-activity-summary {
  border-left: 4px solid var(--color-accent, #3DAED2);
  background: var(--color-light, #F5F7FA);
  padding: .9em 1.1em;
}

@media (max-width: 600px) {
  .rfi-pricebox dl {
    grid-template-columns: 1fr;
    gap: .1em;
  }
  .rfi-pricebox dt {
    margin-top: .6em;
  }
  .rfi-search-row {
    flex-direction: column;
  }
  .rfi-search button {
    width: 100%;
  }
}

/* =======================================================
   Uebersichtsseite (Archiv): Einstieg, Suche, Methodik
   ======================================================= */

.rfi-intro {
  font-size: 1.06rem;
  line-height: 1.6;
  margin: 0 0 1.6em;
}

/*
 * DIE WERKZEUGLEISTE
 *
 * Vorher ein hellgrauer Kasten mit Innenabstand, Beschriftung ueber dem
 * Eingabefeld und drei gestapelten Filterbloecken - zusammen rund 260 Pixel,
 * bevor die erste Aktie kam. Jetzt eine Leiste: Suchzeile, darunter drei
 * Filterzeilen mit der Bezeichnung LINKS neben den Schaltflaechen.
 *
 * Der Kasten ist zur Linie geworden. Die Leiste hebt sich nach unten ab statt
 * durch eine Flaeche - das grenzt genauso deutlich ab und kostet keinen
 * Innenabstand.
 */
.rfi-search {
  border-bottom: 1px solid #e3e7ee;
  padding: 0 0 .75em;
  margin: 0 0 1em;
}

.rfi-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
}

.rfi-search input[type="search"] {
  flex: 1 1 22em;
  min-width: 0;
  padding: .5em .7em;
  border: 1px solid #c3ccda;
  border-radius: 4px;
  font-size: .95rem;
}

.rfi-search input[type="search"]:focus-visible,
.rfi-search button:focus-visible {
  outline: 2px solid #1a4d7a;
  outline-offset: 2px;
}

.rfi-search button {
  padding: .5em 1.2em;
  border: 0;
  border-radius: 4px;
  background: var(--color-primary, #1F3C77);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}

.rfi-search button:hover,
.rfi-search button:focus-visible {
  background: #162d5c;
}

.rfi-search-hint {
  color: var(--color-medium, #555);
  font-size: .92rem;
  margin: .6em 0 0;
}

/*
 * Die Bestandszahlen als Leiste. Die beiden Zahlen stehen GETRENNT - eine
 * Gesamtzahl allein wuerde 247 ungeprueffte Titel als geprueft ausweisen.
 */
.rfi-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .2em 1.4em;
  margin: .6em 0 0;
  font-size: .92rem;
  color: var(--color-medium, #555);
}

.rfi-stats strong {
  color: var(--color-dark, #222);
  font-variant-numeric: tabular-nums;
}

/*
 * Die ausfuehrliche Erklaerung - einen Klick entfernt statt zwei Absaetze
 * hoch. Sie ist nicht gekuerzt, sie steht nur nicht mehr vor den Daten.
 */
.rfi-legend {
  margin: .5em 0 1.2em;
  font-size: .92rem;
}

.rfi-legend > summary {
  cursor: pointer;
  color: var(--color-primary, #1F3C77);
  font-weight: 600;
  padding: .2em 0;
}

.rfi-legend > summary:focus-visible {
  outline: 2px solid #1a4d7a;
  outline-offset: 2px;
}

.rfi-legend-body {
  border-left: 3px solid #d7dde7;
  padding: .1em 0 .1em .9em;
  margin: .5em 0 0;
  line-height: 1.6;
}

.rfi-legend-body p {
  margin: 0 0 .7em;
}

.rfi-legend-list {
  display: grid;
  grid-template-columns: minmax(7em, 13em) 1fr;
  gap: .3em .9em;
  margin: 0;
}

.rfi-legend-list dt {
  font-weight: 600;
}

.rfi-legend-list dd {
  margin: 0;
}

/* ------------------------------------------------------------------
 * Screener-Uebersicht
 *
 * Die Uebersicht hat eine andere Aufgabe als die Wertpapierseite:
 * finden, vergleichen, Stand erkennen. Eine Zeile je Wertpapier.
 *
 * Der Stand ist NIE allein ueber Farbe erkennbar - er steht
 * ausgeschrieben in der Zelle, davor ein Zeichen. Die Farbe am linken
 * Rand ist eine Zugabe fuer das Ueberfliegen, kein Traeger der
 * Information. Bewusst zurueckhaltend: keine Ampelflaechen.
 * ------------------------------------------------------------------ */

.rfi-screener {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1em;
  font-size: .92rem;
}

.rfi-screener-caption {
  caption-side: top;
  text-align: left;
  color: var(--color-medium, #555);
  font-size: .84rem;
  line-height: 1.5;
  margin: 0 0 .5em;
}

/*
 * DICHTE
 *
 * Eine Zeile war eine mehrzeilige Karte: Name, Kuerzel, graue Unterzeile mit
 * Handelsplatz und Datenstand, daneben ein ausgeschriebener Ergebnissatz. Bei
 * vier Wertpapieren liest sich das wie ein kleiner Katalog; bei 251 wie 251
 * Kurzartikel, durch die man scrollt, statt sie zu vergleichen.
 *
 * Jetzt: zwei Textzeilen in der Namensspalte, eine in allen anderen. Mit
 * .38em Innenabstand ergibt das rund 48 Pixel - dicht genug, um mehrere
 * Aktien gleichzeitig zu sehen, und weit genug fuer einen Fingertipp
 * (Zielflaeche der Verweise bleibt ueber 44 Pixel hoch, weil der Link die
 * ganze Zellhoehe fuellt).
 *
 * Die Schrift ist NICHT kleiner geworden, wo sie etwas traegt: das Kuerzel
 * steht auf .95rem. Klein ist nur, was begleitet.
 */
.rfi-screener th,
.rfi-screener td {
  text-align: left;
  padding: .38em .6em;
  border-bottom: 1px solid #eceff4;
  vertical-align: middle;
}

/*
 * DER KOPF BLEIBT STEHEN
 *
 * Bei 251 Zeilen ist eine Zahl ohne ihren Spaltenkopf eine Zahl ohne
 * Bedeutung - und nach dem dritten Bildschirm ist der Kopf weg. position:
 * sticky loest das mit zwei Zeilen CSS, ohne Skript und ohne Messung: faellt
 * die Eigenschaft aus, scrollt der Kopf wie vorher mit. Kein Verlust.
 *
 * Kein z-index-Wettlauf mit den Erklaerungen: die Panels liegen auf 30, der
 * Kopf auf 2. Ein aufgeklapptes Feld deckt den Kopf zu, und das ist richtig -
 * es ist das, was der Besucher gerade lesen will.
 */
.rfi-screener thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 2px solid #c9d2e0;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-medium, #555);
  white-space: nowrap;
  padding-top: .5em;
  padding-bottom: .5em;
  vertical-align: bottom;
}

/*
 * DIE DREI KENNZAHLENSPALTEN SIND EINE GRUPPE.
 *
 * Gleiche Breite, gleiche Ausrichtung, ein gemeinsamer heller Rahmen links
 * und rechts. Ohne feste Breite richtet der Browser jede Spalte nach ihrer
 * Ueberschrift aus - "Nicht erfüllt" waere dann doppelt so breit wie
 * "Offen", und drei Zahlen, die zusammengehoeren, staenden in drei
 * verschiedenen Rastern.
 *
 * Die Ueberschrift darf dafuer umbrechen; `white-space: normal` gilt nur
 * hier und hebt die Regel des uebrigen Kopfes gezielt auf.
 */
/*
 * DIE DREI KENNZAHLENSPALTEN - GLEICH BREIT UND EINZEILIG.
 *
 * "NICHT ERFÜLLT" ist die laengste der drei Ueberschriften und bestimmt
 * damit die Breite aller drei: 7.5rem reichen fuer sie in Versalien auf
 * .76rem mit Sperrung, ohne Umbruch und ohne verkleinerte Schrift.
 *
 * In rem und nicht in em: der Kopf steht auf .76rem, die Zelle auf .92rem,
 * und "7.5em" waere in beiden eine ANDERE Breite. Der Browser naehme die
 * groessere - die Spalte haette dann eine Breite, die niemand aufgeschrieben
 * hat. In rem rechnen beide dieselbe.
 *
 * WOHER DER PLATZ KOMMT: die vier Spalten links tragen kurze, feste Werte
 * (BIST, XKTUM, ein Wort, ein Pfeil). Sie stehen auf `width: 1%` und
 * schrumpfen damit auf ihren Inhalt; die Namensspalte nimmt, was uebrig
 * bleibt. Der Gewinn aus der Verdichtung liegt also genau hier.
 */
.rfi-screener-num {
  width: 7.5rem;
  min-width: 7.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.rfi-screener thead th.rfi-screener-num {
  /* Einzeilig - die Breite oben ist dafuer da. */
  white-space: nowrap;
  vertical-align: bottom;
}

/* ----------------------------------------------------- Spalte "Aktie" */

/*
 * Das Kuerzel fuehrt. Es ist das kuerzeste eindeutige Merkmal einer Aktie,
 * es ist ueberall gleich lang, und es ist das, wonach gesucht wird.
 */
.rfi-screener-name a {
  display: block;
  text-decoration: none;
  line-height: 1.25;
}

.rfi-screener-name a:hover .rfi-ticker,
.rfi-screener-name a:focus-visible .rfi-ticker {
  text-decoration: underline;
}

.rfi-screener-name a:focus-visible {
  outline: 2px solid #1a4d7a;
  outline-offset: 1px;
}

.rfi-screener-name .rfi-ticker {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .03em;
  color: var(--color-primary, #1F3C77);
}

/*
 * Der Name begleitet und draengt sich nicht vor. Er wird abgeschnitten statt
 * umgebrochen - eine zweite Zeile je Name waere die Kartenhoehe zurueck. Der
 * vollstaendige Name steht im title und fuer die Sprachausgabe im Link.
 */
/*
 * Der Name begleitet und draengt sich nicht vor. Nach der ersten visuellen
 * Abnahme weiter zurueckgenommen: kleiner, heller, mit engerer Zeilenhoehe.
 * Er wird abgeschnitten statt umgebrochen - eine zweite Zeile je Name waere
 * die Kartenhoehe zurueck. Der vollstaendige Name steht im title und fuer
 * die Sprachausgabe im Link.
 */
.rfi-screener-company {
  display: block;
  max-width: 20em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .01em;
  color: #7b8494;
}

/* ----------------------------------------------------- Spalte "Markt" */

/*
 * Das Kuerzel des Handelsplatzes. <abbr> ist dafuer das richtige Element:
 * es traegt die Langform im title, und Hilfsmittel koennen sie ansagen.
 * Kein gepunkteter Unterstrich - 251-mal waere er ein Muster und kein
 * Hinweis.
 */
.rfi-screener-market {
  white-space: nowrap;
  width: 1%;
}

.rfi-screener-market abbr {
  text-decoration: none;
  border: 0;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--color-medium, #555);
  cursor: help;
}

/* ----------------------------------------------------- Sortierbarer Kopf */

/*
 * Sieben Spalten, sieben Verweise - und trotzdem eine ruhige Zeile.
 *
 * Der Verweis sieht aus wie die Beschriftung, die er ersetzt: dieselbe
 * Schrift, dieselbe Farbe, kein Unterstrich. Das Sortierzeichen dahinter ist
 * blass und klein, solange die Spalte nicht sortiert ist; erst die aktive
 * Spalte bekommt Kontur.
 *
 * Sieben Schaltflaechen mit Rahmen waeren eine Werkzeugleiste im Kopf - und
 * der Kopf soll sagen, was in der Spalte steht, nicht was man mit ihr tun
 * kann.
 */
.rfi-sort {
  display: inline-flex;
  align-items: baseline;
  gap: .25em;
  color: inherit;
  text-decoration: none;
  border-radius: 3px;
  padding: .1em .2em;
  margin: -.1em -.2em;
}

.rfi-sort:hover {
  color: var(--color-primary, #1F3C77);
  background: #f2f5fa;
}

.rfi-sort:focus-visible {
  outline: 2px solid #1a4d7a;
  outline-offset: 1px;
}

.rfi-sort-mark {
  font-size: .85em;
  line-height: 1;
  color: #b3bcca;
}

.rfi-sort:hover .rfi-sort-mark {
  color: #7b8494;
}

/*
 * Die sortierte Spalte ist NICHT nur an der Farbe erkennbar: sie traegt
 * einen gerichteten Pfeil statt des neutralen Doppelpfeils, fettere Schrift
 * und - fuer die Sprachausgabe - aria-sort am Spaltenkopf.
 */
.rfi-sort-active {
  color: var(--color-primary, #1F3C77);
  font-weight: 700;
}

.rfi-sort-active .rfi-sort-mark {
  color: var(--color-primary, #1F3C77);
}

.rfi-screener thead th[aria-sort="ascending"],
.rfi-screener thead th[aria-sort="descending"] {
  background: #f2f5fa;
}

/*
 * Die externe Referenz traegt bewusst KEINE Statusfarbe und kein Zeichen aus
 * der Statusskala. Sie ist eine Beobachtung, nicht ein Ergebnis - und in der
 * Optik eines Ergebnisses waere sie dasselbe in anderer Waehrung.
 */
.rfi-screener-external {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-medium, #555);
  font-size: .82rem;
  letter-spacing: .03em;
  width: 1%;
}

/* -------------------------------------------------- Filterleiste (E5-G5) */

/*
 * Drei Zeilen statt drei Bloecken.
 *
 * Die Bezeichnung stand ueber ihren Schaltflaechen und kostete je Gruppe eine
 * eigene Zeile; nebeneinander gestellt waren die drei Gruppen auf einem
 * schmalen Bildschirm ohnehin untereinander. Jetzt steht die Bezeichnung
 * LINKS in fester Breite - die Schaltflaechen fluchten dadurch untereinander,
 * und die Leiste ist um rund drei Zeilen flacher.
 */
/*
 * EINE ZEILE FUER ALLE FILTER.
 *
 * Bis zur ersten visuellen Abnahme standen drei Filtergruppen untereinander;
 * die Referenzgruppe ist danach ganz entfallen (sie waehlte bei diesem
 * Bestand dasselbe aus wie der Marktfilter). Die beiden verbliebenen stehen
 * nebeneinander und brauchen zusammen EINE Zeile.
 *
 * `row-gap` traegt den Fall mit, dass sie auf einem schmalen Bildschirm
 * umbrechen - dann stehen sie wieder untereinander, mit Abstand.
 */
.rfi-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45em 2.2em;
  margin: .6em 0 0;
}

.rfi-filter-group {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3em .6em;
  min-width: 0;
}

.rfi-filter-legend {
  /*
   * Keine feste Breite mehr: die beiden Gruppen stehen nebeneinander, und
   * eine Spalte von 5.5em vor jeder von ihnen waere Platz ohne Aufgabe.
   */
  flex: 0 0 auto;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-medium, #555);
}

.rfi-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: .3em .45em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rfi-filter-list a {
  display: inline-block;
  padding: .15em .65em;
  border: 1px solid #c9d2e0;
  border-radius: 999px;
  font-size: .84rem;
  text-decoration: none;
  color: var(--color-dark, #222);
  white-space: nowrap;
}

.rfi-filter-list a:focus-visible {
  outline: 2px solid #1a4d7a;
  outline-offset: 2px;
}

.rfi-filter-list a:hover,
.rfi-filter-list a:focus {
  border-color: #8b9ab1;
  text-decoration: underline;
}

/*
 * Die aktive Auswahl ist NICHT allein an der Farbe erkennbar - dieselbe Regel
 * wie beim Prüfstand in der Tabelle. Sie traegt zusaetzlich einen staerkeren
 * Rahmen, fettere Schrift und eine eigene Beschriftung fuer die Sprachausgabe.
 */
.rfi-filter-list a[aria-current="true"] {
  border-color: #3f5876;
  border-width: 2px;
  padding: calc(.15em - 1px) calc(.65em - 1px);
  font-weight: 600;
  background: #eef2f8;
}

.rfi-filter-count {
  margin-left: .35em;
  color: var(--color-medium, #555);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.rfi-filter-list a[aria-current="true"] .rfi-filter-count {
  color: inherit;
}

/* ------------------------------------ Externe Indexreferenz (Detailseite) */

/*
 * Der Block hebt sich ab, damit die Grenze zwischen fremder Aussage und
 * eigener Rechnung sichtbar ist - und zwar durch Rahmen und Abstand, nicht
 * durch eine Statusfarbe.
 */
.rfi-block-external {
  border: 1px solid #c9d2e0;
  border-left: 4px solid #8b9ab1;
  border-radius: 4px;
  padding: 1em 1.1em;
  background: #fbfcfe;
}

.rfi-external-item + .rfi-external-item {
  margin-top: 1.2em;
  padding-top: 1.2em;
  border-top: 1px solid #e3e7ee;
}

.rfi-external-claim {
  font-weight: 600;
  margin: 0 0 .7em;
}

.rfi-external-meta {
  display: grid;
  grid-template-columns: minmax(10em, 15em) 1fr;
  gap: .35em .9em;
  margin: 0 0 .8em;
}

.rfi-external-meta dt {
  font-size: .86rem;
  color: var(--color-medium, #555);
}

.rfi-external-meta dd {
  margin: 0;
  font-size: .92rem;
}

.rfi-external-hint {
  display: block;
  margin-top: .2em;
  font-size: .84rem;
  color: var(--color-medium, #555);
}

.rfi-external-caveat {
  margin: 0 0 .8em;
  padding: .6em .8em;
  border-left: 3px solid #c9d2e0;
  background: #fff;
  font-size: .92rem;
}

.rfi-external-method summary {
  cursor: pointer;
  font-size: .92rem;
}

.rfi-external-disclaimer {
  margin: .8em 0 0;
  font-size: .86rem;
  color: var(--color-medium, #555);
}

/*
 * Das Ergebnis ist die Aussage der Zeile, nicht eine Zahl. Es darf
 * deshalb nicht umbrochen in einer schmalen Spalte verschwinden.
 */
/*
 * Sichtbar steht ein Wort, nicht mehr der ganze Satz. Die Spalte ist damit
 * von 11em auf rund 7em geschrumpft - und sie unterscheidet die Zeilen
 * wieder, statt 247-mal dasselbe zu sagen. Der Satz steht im title und fuer
 * die Sprachausgabe in der Zelle.
 */
.rfi-screener-status {
  font-weight: 600;
  white-space: nowrap;
  width: 1%;
}

.rfi-screener-mark {
  margin-right: .3em;
  font-weight: 700;
}

.rfi-screener-verdict {
  font-size: .88rem;
}

/* ---------------------------------------------------- Spalte "Details" */

/*
 * Ein Pfeil statt "Warum noch offen?". Die Beschriftung ist nicht weg - sie
 * steht im Link fuer die Sprachausgabe und bleibt zustandsabhaengig.
 *
 * Die Zielflaeche ist bewusst groesser als das Zeichen: der Link fuellt die
 * Zelle, damit auf einem Telefon nicht ein 10-Pixel-Pfeil getroffen werden
 * muss.
 */
.rfi-screener-details {
  width: 1%;
  text-align: right;
}

.rfi-screener-details a {
  display: inline-block;
  padding: .25em .45em;
  margin: -.25em -.45em;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  color: var(--color-primary, #1F3C77);
  border-radius: 4px;
}

.rfi-screener-details a:hover {
  background: #eef2f8;
}

.rfi-screener-details a:focus-visible {
  outline: 2px solid #1a4d7a;
  outline-offset: 1px;
}

/*
 * Farbe ausschliesslich als Zugabe - der Text traegt die Aussage. Die
 * Klasse folgt der Besucherlage, nicht dem fachlichen Status: sie muss
 * zur Aussage in der Zelle passen, und "offen" und "noch nicht
 * gerechnet" sehen fuer einen Besucher gleich aus.
 */
.rfi-screener-row.rfi-state-fulfilled   { border-left: 3px solid #2E7D5B; }
.rfi-screener-row.rfi-state-unfulfilled { border-left: 3px solid #A6392E; }
.rfi-screener-row.rfi-state-open,
.rfi-screener-row.rfi-state-none        { border-left: 3px solid #B8860B; }

/* Die Zeile unter dem Zeiger - beim Vergleichen ueber acht Spalten hinweg
 * ist das der Unterschied zwischen Lesen und Verrutschen. */
.rfi-screener tbody tr:hover { background: #f7f9fc; }

.rfi-screener-row.rfi-state-fulfilled   .rfi-screener-mark { color: #2E7D5B; }
.rfi-screener-row.rfi-state-unfulfilled .rfi-screener-mark { color: #A6392E; }
.rfi-screener-row.rfi-state-open        .rfi-screener-mark,
.rfi-screener-row.rfi-state-none        .rfi-screener-mark { color: #B8860B; }

.rfi-screener-details a {
  font-weight: 600;
}

/* --------------------------------------------------------- Blaetterleiste */

/*
 * Eine Leiste unter der Tabelle: links die Trefferangabe, in der Mitte die
 * Seiten, rechts die Zahl je Seite. Auf schmalen Bildschirmen bricht sie um
 * und stapelt sich - dafuer braucht es keine eigene Regel, nur flex-wrap.
 */
.rfi-paging {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6em 1.4em;
  margin: 0 0 1.4em;
  padding-top: .8em;
  border-top: 1px solid #e3e7ee;
}

/*
 * Die Zeile unter der Ueberschrift, die den gezeigten Ausschnitt nennt.
 * Sie stand bis zu dieser Abnahme in der Blaetterleiste; oben beantwortet
 * sie die Frage, bevor man die Tabelle liest, statt danach.
 */
.rfi-resultline {
  margin: -.2em 0 .6em;
  font-size: .9rem;
  color: var(--color-medium, #555);
  font-variant-numeric: tabular-nums;
}

.rfi-paging-nav {
  display: flex;
  align-items: center;
  gap: .35em;
  flex-wrap: wrap;
}

.rfi-paging-list {
  display: flex;
  align-items: center;
  gap: .2em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rfi-paging-page,
.rfi-paging-step {
  display: inline-block;
  padding: .25em .6em;
  border: 1px solid #c9d2e0;
  border-radius: 4px;
  font-size: .86rem;
  text-decoration: none;
  color: var(--color-dark, #222);
  font-variant-numeric: tabular-nums;
}

.rfi-paging-page:hover,
.rfi-paging-step:hover {
  border-color: #8b9ab1;
  background: #f5f7fa;
}

.rfi-paging-page:focus-visible,
.rfi-paging-step:focus-visible {
  outline: 2px solid #1a4d7a;
  outline-offset: 2px;
}

/*
 * Die aktuelle Seite ist kein Verweis. Sie traegt aria-current="page" - und
 * weil ein Zustand nie allein an der Farbe haengen darf, zusaetzlich einen
 * staerkeren Rahmen, fettere Schrift und einen eigenen Text fuer die
 * Sprachausgabe.
 */
.rfi-paging-page[aria-current="page"] {
  border-color: #3f5876;
  border-width: 2px;
  padding: calc(.25em - 1px) calc(.6em - 1px);
  font-weight: 700;
  background: #eef2f8;
  cursor: default;
}

/* Am Rand gibt es kein Zurueck - die Schaltflaeche bleibt sichtbar und tot. */
.rfi-paging-off {
  color: #a6aebc;
  border-color: #e3e7ee;
  background: #fafbfd;
  cursor: default;
}

.rfi-paging-gap {
  display: inline-block;
  padding: .25em .25em;
  color: var(--color-medium, #555);
}

.rfi-paging-size {
  display: flex;
  align-items: baseline;
  gap: .45em;
}

.rfi-paging-legend {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-medium, #555);
}

.rfi-screener-note {
  color: var(--color-medium, #555);
  font-size: .9rem;
  line-height: 1.6;
  margin: 0 0 .8em;
}

.rfi-screener-note:last-of-type {
  margin-bottom: 1.4em;
}

/* --------------------------------------------------------------------
 * Die Erklaerung zu einer Zahl
 *
 * Ein <details> und kein Skript-Tooltip: aufklappbar mit Maus, mit der
 * Tastatur und mit dem Finger, ohne JavaScript und ohne Bibliothek. Der
 * Browser bringt Rolle und Zustand selbst mit. Faellt das ergaenzende
 * Skript aus, bleibt jede Erklaerung erreichbar.
 * ------------------------------------------------------------------ */

.rfi-pop {
  position: relative;
  display: inline-block;
}

.rfi-pop-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  cursor: pointer;
  padding: .1em .3em;
  border: 1px solid transparent;
  border-radius: 4px;
  list-style: none;
}

/* Der Browser-Pfeil traegt hier nichts bei - die Zahl ist der Anker. */
.rfi-pop-toggle::-webkit-details-marker { display: none; }
.rfi-pop-toggle::marker { content: ""; }

.rfi-pop-toggle:hover {
  border-color: #c9d2e0;
  background: #f5f7fa;
}

/* Sichtbarer Fokus - die Tastatur muss sehen, wo sie steht. */
.rfi-pop-toggle:focus-visible {
  outline: 2px solid #1a4d7a;
  outline-offset: 2px;
}

.rfi-pop-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/*
 * Die Zahl IST der Umschalter, seit das Informationszeichen entfallen ist.
 * Dass sie einer ist, sagt jetzt die Darstellung: gepunktete Unterlinie und
 * Zeigefinger. Das ist die uebliche Anzeige fuer "hier steht mehr dahinter"
 * und kostet kein Zeichen in der Zeile.
 *
 * Die Unterlinie haengt NICHT an der Farbe - sie ist eine Form.
 */
.rfi-pop-count {
  text-decoration: underline dotted #8b9ab1;
  text-underline-offset: .25em;
}

.rfi-pop-toggle:hover .rfi-pop-count,
.rfi-pop[open] .rfi-pop-count {
  text-decoration: underline solid currentColor;
}

.rfi-pop[open] > .rfi-pop-toggle {
  border-color: #c9d2e0;
  background: #f5f7fa;
}

.rfi-pop-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .3em);
  z-index: 30;
  width: 24rem;
  max-width: min(24rem, 78vw);
  text-align: left;
  white-space: normal;
  font-weight: 400;
  font-size: .88rem;
  line-height: 1.5;
  padding: .9em 1em;
  background: #fff;
  border: 1px solid #c9d2e0;
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(20, 35, 60, .14);
}

.rfi-pop-intro {
  margin: 0 0 .6em;
  font-weight: 600;
}

.rfi-pop-group + .rfi-pop-group {
  margin-top: .7em;
}

.rfi-pop-method {
  margin: 0 0 .25em;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-medium, #555);
}

.rfi-pop-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rfi-pop-list li {
  margin: 0 0 .4em;
  padding-left: 1.3em;
  text-indent: -1.3em;
}

.rfi-pop-mark {
  display: inline-block;
  width: 1.3em;
  text-indent: 0;
  font-weight: 700;
}

.rfi-pop-why,
.rfi-pop-norun {
  display: block;
  margin: .1em 0 0;
  padding-left: 1.3em;
  text-indent: 0;
  font-size: .95em;
  color: var(--color-medium, #555);
}

.rfi-pop-norun { padding-left: 0; }

.rfi-state-fulfilled   .rfi-pop-mark,
.rfi-pop-list li .rfi-pop-mark { color: inherit; }

.rfi-pop-note {
  margin: .7em 0 0;
  padding-top: .6em;
  border-top: 1px solid #e3e7ee;
  color: var(--color-medium, #555);
}

.rfi-pop-more {
  margin: .7em 0 0;
}

.rfi-pop-more a {
  font-weight: 600;
}

/* Nur fuer Screenreader - Zahl und Verweis nennen dort das Wertpapier. */
.rfi-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  /*
   * Keine breite Sechs-Spalten-Tabelle, die horizontal gescrollt werden
   * muss. Jede Zeile wird zu einer kompakten Karte in der Reihenfolge,
   * in der ein Besucher sie liest:
   *
   *   Unternehmen + Kuerzel -> Ergebnis -> die drei Zahlen -> Weg
   *
   * Die Spaltenkoepfe sind dort nicht sichtbar, deshalb traegt jede
   * Zahl ihre Bezeichnung selbst.
   */
  .rfi-screener,
  .rfi-screener tbody,
  .rfi-screener tr,
  .rfi-screener td {
    display: block;
    width: auto;
  }

  .rfi-screener thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  /*
   * MOBIL: DIE KARTE BLEIBT, SIE WIRD DICHT
   *
   * Acht Spalten auf 375 Pixel zu pressen ergibt acht unlesbare Spalten;
   * horizontal zu scrollen versteckt die Haelfte. Die gestapelte Karte war
   * schon vorher das Muster dieses Projekts und bleibt es.
   *
   * Neu ist die Anordnung IN der Karte. Sie folgt der Reihenfolge, in der
   * auf einem Telefon entschieden wird:
   *
   *   Zeile 1   Kuerzel + Name ........... welche Aktie   (Pfeil rechts)
   *   Zeile 2   BIST · XKTUM · Offen ..... die drei Merkmale
   *   Zeile 3   Erfüllt 0  Nicht erfüllt 0  Offen 9
   *
   * Vorher hatte jede Angabe eine eigene Zeile mit Bezeichnung links und
   * Wert rechts - neun Zeilen je Karte. Jetzt sind es drei. Die
   * Bezeichnungen der drei Zahlen bleiben dabei (data-label): mobil sind die
   * Spaltenkoepfe ausgeblendet, und eine Zahl ohne ihr Wort sagt dort nichts.
   *
   * Bewusst Fluss und kein Raster: die Zellen sind hier <td>-Elemente mit
   * display:block, und ein Raster darueber waere gegen die Tabelle gebaut.
   */
  .rfi-screener-row {
    position: relative;
    border: 1px solid #e3e7ee;
    border-radius: 4px;
    padding: .55em .7em;
    margin: 0 0 .5em;
  }

  .rfi-screener td {
    border-bottom: 0;
    padding: 0;
  }

  /*
   * Platz fuer den Pfeil, damit der Name nicht darunter laeuft - und der
   * Abstand zur Merkmalszeile. Er sitzt HIER und nicht an der Merkmalszeile:
   * die ist inline, und ein margin-top wirkt an einem inline-Element nicht.
   */
  .rfi-screener-name {
    padding-right: 2.2em;
    margin-bottom: .3em;
  }

  .rfi-screener-company {
    max-width: none;
  }

  /* Der Pfeil sitzt oben rechts in der Karte - mit grosser Zielflaeche. */
  .rfi-screener-details {
    position: absolute;
    top: .35em;
    right: .45em;
    width: auto;
  }

  .rfi-screener-details a {
    padding: .4em .55em;
    margin: 0;
  }

  /* Die drei Merkmale in EINER Zeile, durch Trennpunkte geschieden. */
  .rfi-screener-market,
  .rfi-screener-external,
  .rfi-screener-status {
    display: inline;
    width: auto;
    white-space: normal;
  }

  .rfi-screener-external::before,
  .rfi-screener-status::before {
    content: "·";
    margin: 0 .4em;
    color: #9aa6b8;
  }

  /*
   * Die drei Zahlen nebeneinander statt untereinander, mit ihrer
   * Bezeichnung davor.
   */
  .rfi-screener-num {
    display: inline-flex;
    align-items: baseline;
    gap: .3em;
    width: auto;
    margin: .5em .9em 0 0;
    text-align: left;
  }

  .rfi-screener-num::before {
    content: attr(data-label);
    color: var(--color-medium, #555);
    font-size: .78rem;
  }

  /*
   * Die Zahlenzeile beginnt auf einer neuen Zeile. Ein echter Umbruch im
   * Fluss ("\A" mit white-space: pre) statt eines Rasters - er wirkt an
   * einem inline-Element, ein display:block an dieser Stelle wuerde die
   * Inline-Box zerlegen.
   */
  .rfi-screener-status::after {
    content: "\A";
    white-space: pre;
  }

  /* Zwei Spalten fuer Bezeichnung und Wert sind auf einem Telefon eine zu viel. */
  .rfi-external-meta {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .rfi-external-meta dt {
    margin-top: .6em;
    font-weight: 600;
  }

  /*
   * Mobil stapeln sich die beiden Filtergruppen wieder - nebeneinander
   * blieben von jeder zwei Schaltflaechen sichtbar.
   */
  .rfi-filters {
    flex-direction: column;
    gap: .45em;
  }

  /* Die Zahlenspalten haben in der gestapelten Karte keine Spaltenbreite. */
  .rfi-screener-num {
    width: auto;
    min-width: 0;
    border-left: 0;
    border-right: 0;
    text-align: left;
  }

  /*
   * Mobil ist der Tabellenkopf ausgeblendet - und mit ihm die
   * Sortierverweise. Die Reihenfolge laesst sich dort ueber die Adresse
   * waehlen; eine eigene Bedienung dafuer waere ein zweites Muster fuer
   * dieselbe Sache.
   */

  .rfi-screener th:nth-of-type(5),
  .rfi-screener td:nth-of-type(5),
  .rfi-screener th:nth-of-type(7),
  .rfi-screener td:nth-of-type(7) {
    border-left: 0;
    border-right: 0;
  }

  /*
   * Die Blaetterleiste stapelt sich und rueckt zusammen; die Seitenzahlen
   * duerfen umbrechen statt zu scrollen.
   */
  .rfi-paging {
    flex-direction: column;
    align-items: flex-start;
    gap: .7em;
  }

  .rfi-paging-nav {
    width: 100%;
  }


  /*
   * Mobil klappt die Erklaerung in der Karte auf statt ueber ihr zu
   * schweben - ein schwebendes Feld auf einem schmalen Bildschirm
   * verdeckt genau das, was daneben steht.
   */
  /*
   * Die Zahl steht mobil in einer schmalen Zelle; ein Erklaerungsfeld darin
   * waere zwei Woerter breit. `position: static` am Umschalter gibt dem Feld
   * die KARTE als Bezugsrahmen - sie ist relativ positioniert -, und mit
   * left/right spannt es ihre volle Breite.
   */
  .rfi-pop {
    position: static;
    display: inline-block;
    text-align: left;
  }

  .rfi-pop-panel {
    left: .5em;
    right: .5em;
    top: auto;
    width: auto;
    max-width: none;
    margin-top: .4em;
  }

  /* Mobil kein sticky Kopf - er ist ohnehin ausgeblendet. */
  .rfi-screener thead th {
    position: static;
  }
}

.rfi-empty {
  border-left: 4px solid var(--color-warning, #E5B83E);
  background: #fdf7e3;
  padding: 1em 1.2em;
  margin: 0 0 1.6em;
  line-height: 1.55;
}

.rfi-coverage {
  color: var(--color-medium, #555);
  font-size: .95rem;
  margin: 0 0 2.2em;
}

.rfi-criteria-standard {
  margin: 0 0 1.8em;
}

.rfi-criteria-standard > p.rfi-sourceref {
  margin-top: .2em;
}

.rfi-criterion {
  border-left: 3px solid #d7dde7;
  padding: .15em 0 .15em .8em;
  margin: 0 0 .9em;
}

.rfi-criterion-label {
  font-weight: 600;
}

.rfi-criterion-rule {
  display: block;
  margin: .2em 0;
  font-size: .95rem;
}

.rfi-criterion-note {
  display: block;
  color: var(--color-medium, #555);
  font-size: .92rem;
  margin: .2em 0 0;
}

.rfi-answer dt {
  font-weight: 600;
  margin: 1em 0 .2em;
}

.rfi-answer dd {
  margin: 0;
  line-height: 1.6;
}


.rfi-summary {
  font-size: 1.06rem;
  line-height: 1.6;
  background: var(--color-light, #F5F7FA);
  border-left: 4px solid var(--color-primary, #1F3C77);
  padding: .85em 1.1em;
  margin: 0 0 1.1em;
}