/* 29.10.2026 Prüfvarianten Tabellen-Look für tabelle11.php, Abschnitt #banken. Ohne Wirkung, solange html nicht tg-look-1 … tg-look-4 trägt.
   Eingebunden nur mit ?tabellenlook=1..4 über tabelle11-konfig.php (Link plus Klasse am html). Entwurf und Begründung: legacy_trigonus_work/fonds-tabelle-look/01-entwurf.md.
   Gemeinsame Regeln aller Varianten stehen unter „Basis“; Texte bleiben unverändert, nur CSS.
   Grenzwerte: Filterzustand tr.is-aus (#f4f5f7, !important in v5.css) bleibt unangetastet; Zebra schaltet sich ab, sobald ein Filter Zeilen abblendet,
   weil #f3f6fb und #f4f5f7 praktisch gleich hell sind (Kontrast 1,01:1) und eine Zebrazeile sonst wie „ausgefiltert“ wirkt. */

/* ---------- Basis (alle Varianten) ---------- */
/* Chips: das unsichtbare Häkchen reservierte 19 px links, der Text saß sichtbar rechts der Mitte. Häkchen nur bei gewähltem Chip einblenden. */
html[class*="tg-look-"] .v5 .v5-chip::before { display: none; }
html[class*="tg-look-"] .v5 .v5-chip[aria-pressed="true"]::before { display: inline-block; }
/* Fondssuche als Nebenlink in Kleinschrift (vorher 18 px wie Fließtext, unterstrichen, konkurrierte mit Bankname und Knöpfen) */
html[class*="tg-look-"] #v5-tabelle .v5-suche { font-size: var(--fs-s); }

/* ---------- Variante 1: Ruhig (feine Zebra, Typo-Hierarchie) ---------- */
@media (min-width: 992px) {
  html.tg-look-1 #v5-tabelle thead th { color: #0b2358; border-bottom: 2px solid #0b2358; padding-bottom: 12px; }
  html.tg-look-1 #v5-tabelle td, html.tg-look-1 #v5-tabelle th[scope=row] { border-bottom-color: #e3e8f1; padding-top: 20px; padding-bottom: 20px; }
  html.tg-look-1 #v5-tabelle tbody tr:nth-child(even) > * { background: #f3f6fb; }
  html.tg-look-1 #v5-tabelle tbody tr:hover > * { background: #eef2f9; }
  html.tg-look-1 #v5-tabelle .v5-preis { color: #0b2358; } /* Größe bleibt (22 px ab 1180, 20 px darunter): 26 px brach „25 bis 45 €“ in zwei Zeilen */
  html.tg-look-1 #v5-tabelle .v5-td-spar { font-family: var(--serif); font-size: calc(20px * var(--v5sk, 1)); color: #0b2358; }
  html.tg-look-1 #v5-tabelle .v5-td-spar .v5-pos { font-family: var(--sans); font-weight: 400; }
}
@media (min-width: 992px) and (max-width: 1179px) {
  html.tg-look-1 #v5-tabelle .v5-td-spar { font-size: calc(18px * var(--v5sk, 1)); }
}
html.tg-look-1 #v5-tabelle:has(tr.is-aus) tbody tr > * { background: #fff; }
@media (max-width: 991px) {
  html.tg-look-1 #v5-tabelle .v5-preis { color: #0b2358; }
}

/* ---------- Variante 2: Filterkopf als Leiste (Steuerung und Kopfzeile als eine Einheit) ---------- */
html.tg-look-2 .v5-banken .v5-steuer { background: #f3f6fb; border: 1px solid #d8deea; border-radius: 12px; padding: 20px 24px 16px; margin: 8px 0 16px; }
html.tg-look-2 .v5-banken .v5-steuer__label { color: #0b2358 !important; }
html.tg-look-2 .v5 .v5-banken .v5-chip { border-color: #6b7895; }
html.tg-look-2 .v5 .v5-banken .v5-chip:not([aria-pressed="true"]):hover { border-color: #13318a; background: #fff; } /* nur ungedrückt: sonst weiße Schrift auf Weiß (Prüflauf 29.10., Kontrast 1:1) */
html.tg-look-2 .v5 .v5-banken .v5-chip[aria-pressed="true"] { border-color: #13318a; }
html.tg-look-2 .v5-banken .v5-zaehl { border-top: 1px solid #d8deea; padding-top: 10px; margin-top: 14px !important; color: #0b2358 !important; font-weight: 600; }
@media (min-width: 861px) {
  html.tg-look-2 .v5-banken .v5-steuer__filter { border-left: 1px solid #d8deea; padding-left: 32px; }
  html.tg-look-2 .v5-banken .v5-steuer { column-gap: 32px; }
}
@media (min-width: 992px) {
  html.tg-look-2 #v5-tabelle thead th { background: #e8eef8; color: #0b2358; border-bottom: 0; padding-top: 14px; padding-bottom: 12px; }
  html.tg-look-2 #v5-tabelle thead th:first-child { border-radius: 10px 0 0 10px; }
  html.tg-look-2 #v5-tabelle thead th:last-child { border-radius: 0 10px 10px 0; }
  html.tg-look-2 #v5-tabelle td, html.tg-look-2 #v5-tabelle th[scope=row] { border-bottom-color: #d8deea; }
  html.tg-look-2 #v5-tabelle tbody tr:hover > * { background: #f3f6fb; }
}
@media (max-width: 860px) {
  html.tg-look-2 .v5-banken .v5-steuer { padding: 16px 14px 12px; margin-left: -6px; margin-right: -6px; }
  html.tg-look-2 .v5-banken .v5-steuer__filter { border-top: 1px solid #d8deea; padding-top: 14px; }
}

/* ---------- Variante 3: Kräftig (Kopfzeile dunkelblau, Preis hervorgehoben, deutliche Zebra) ---------- */
@media (min-width: 992px) {
  html.tg-look-3 #v5-tabelle thead th { background: #0b2358; color: #fff; border-bottom: 0; padding-top: 14px; padding-bottom: 12px; }
  html.tg-look-3 #v5-tabelle thead th:first-child { border-radius: 10px 0 0 0; }
  html.tg-look-3 #v5-tabelle thead th:last-child { border-radius: 0 10px 0 0; }
  html.tg-look-3 #v5-tabelle.v6-tab--a thead th:nth-child(4) { color: #fff; }
  html.tg-look-3 #v5-tabelle td, html.tg-look-3 #v5-tabelle th[scope=row] { border-bottom: 0; }
  html.tg-look-3 #v5-tabelle tbody tr:nth-child(even) > * { background: #e8eef8; }
  html.tg-look-3 #v5-tabelle tbody tr:last-child > * { border-bottom: 2px solid #0b2358; }
  html.tg-look-3 #v5-tabelle tbody tr:hover > * { background: #dfe7f5; }
  html.tg-look-3 #v5-tabelle .v5-preis { font-weight: 700; color: #13318a; } /* Größe bleibt, 28 px brach die FFB-Spanne um */
  html.tg-look-3 #v5-tabelle .v5-preis--text { font-size: var(--fs-s); color: #13318a; }
  html.tg-look-3 #v5-tabelle .v5-td-spar { font-family: var(--serif); font-size: calc(20px * var(--v5sk, 1)); }
  html.tg-look-3 #v5-tabelle .v5-td-spar .v5-pos { font-family: var(--sans); font-weight: 400; }
}
@media (min-width: 992px) and (max-width: 1179px) {
  html.tg-look-3 #v5-tabelle .v5-td-spar { font-size: calc(18px * var(--v5sk, 1)); }
}
html.tg-look-3 #v5-tabelle:has(tr.is-aus) tbody tr > * { background: #fff; }
@media (max-width: 991px) {
  html.tg-look-3 #v5-tabelle th[scope=row] { background: #e8eef8; border-bottom: 1px solid #d8deea; padding-bottom: 12px; }
  html.tg-look-3 #v5-tabelle .v5-preis { color: #13318a; } /* Größe und Gewicht bleiben: ab 24 px bzw. 700 bricht „26 € / 52 €“ (ebase) um */
  html.tg-look-3 #v5-tabelle .v5-preis--text { color: #13318a; }
}

/* ---------- Variante 4: Mobile Karten aufgewertet (Tabelle am Desktop wie Variante 1 ruhig, Schwerpunkt Karten) ---------- */
@media (min-width: 992px) {
  html.tg-look-4 #v5-tabelle td, html.tg-look-4 #v5-tabelle th[scope=row] { border-bottom-color: #e3e8f1; }
  html.tg-look-4 #v5-tabelle tbody tr:nth-child(even) > * { background: #f7f9fc; }
  html.tg-look-4 #v5-tabelle .v5-preis { color: #0b2358; }
}
html.tg-look-4 #v5-tabelle:has(tr.is-aus) tbody tr > * { background: #fff; }
@media (max-width: 991px) {
  html.tg-look-4 #v5-tabelle tr { border-color: #d8deea; border-radius: 12px; box-shadow: 0 1px 2px rgba(11, 35, 88, .06), 0 6px 18px rgba(11, 35, 88, .07); overflow: hidden; }
  html.tg-look-4 #v5-tabelle tr.is-aus { box-shadow: none; }
  html.tg-look-4 #v5-tabelle th[scope=row] { background: #f3f6fb; border-bottom: 1px solid #d8deea; padding-bottom: 12px; border-radius: 12px 12px 0 0; }
  html.tg-look-4 #v5-tabelle .v5-td-preis, html.tg-look-4 #v5-tabelle .v5-td-spar { padding-top: 14px; }
  html.tg-look-4 #v5-tabelle .v5-preis { color: #0b2358; } /* 24 px brach „26 € / 52 €“ um */
  html.tg-look-4 #v5-tabelle .v5-td-spar { font-family: var(--serif); font-size: calc(20px * var(--v5sk, 1)); color: #0b2358; }
  html.tg-look-4 #v5-tabelle .v5-td-spar .v5-lbl, html.tg-look-4 #v5-tabelle .v5-td-spar .v5-pos { font-family: var(--sans); font-weight: 400; }
  html.tg-look-4 #v5-tabelle .v5-td-depot { border-top: 1px solid #e3e8f1; margin: 6px 12px 0; padding-left: 0; padding-right: 0; width: auto; }
  html.tg-look-4 #v5-tabelle .v6-td-akt { background: #fafbfd; border-top: 1px solid #e3e8f1; margin-top: 8px; padding-top: 14px !important; }
}

/* ---------- Review 29.10.: abgeblendete Zeilen behalten in allen Varianten ihr Grau ---------- */
/* Die Varianten färben Preis und Sparplan blau (Selektor mit #v5-tabelle) und überstimmten damit v5.css „tr.is-aus … color: #5a6068“:
   beim Filter „Depot für mein Kind“ blieb der Preis ausgefilterter Banken kräftig blau (Variante 3 deutlich, 1 und 4 dunkelblau). */
html[class*="tg-look-"] #v5-tabelle tr.is-aus .v5-preis, html[class*="tg-look-"] #v5-tabelle tr.is-aus .v5-preis--text, html[class*="tg-look-"] #v5-tabelle tr.is-aus .v5-td-spar { color: #5a6068; }
/* Review 29.10.: Spectral nur für Beträge. „kein Mindestbetrag“ (Zelle ohne „im Monat“) stand als einziges Textwort in der Serif und wirkte wie ein Betrag; zurück auf Open Sans in Bestandsgröße. */
@media (min-width: 992px) {
  html.tg-look-1 #v5-tabelle .v5-td-spar:not(:has(.v5-pos)), html.tg-look-3 #v5-tabelle .v5-td-spar:not(:has(.v5-pos)) { font-family: var(--sans); font-size: calc(18px * var(--v5sk, 1)); }
}
@media (max-width: 991px) {
  html.tg-look-4 #v5-tabelle .v5-td-spar:not(:has(.v5-pos)) { font-family: var(--sans); font-size: calc(17px * var(--v5sk, 1)); }
}
/* Review 29.10.: Variante 2 lief am Handy mit 20 px Standardschrift 6 px seitlich über (Umschalter braucht dort mindestens 391 px, die Fläche ließ 360 px).
   Fläche reicht jetzt bis 6 px an den Bildschirmrand, Innenabstand 10 px; Trennlinien bleiben in der Fläche. */
@media (max-width: 860px) {
  html.tg-look-2 .v5-banken .v5-steuer { padding: 16px 10px 12px; margin-left: -12px; margin-right: -12px; }
  html.tg-look-2 .v5-banken .v5-steuer > * { min-width: 0; }
}
/* Review 29.10.: Variante 4 setzte Kartenrand und Schatten für alle Karten und löschte damit die Markierung passender Karten (v5.css tr.is-an / tr.is-ihre: blauer Rand plus 4-px-Balken links). */
@media (max-width: 991px) {
  html.tg-look-4 #v5-tabelle tr.is-an, html.tg-look-4 #v5-tabelle tr.is-ihre { border-color: var(--blue); box-shadow: inset 4px 0 0 var(--blue), 0 1px 2px rgba(11, 35, 88, .06), 0 6px 18px rgba(11, 35, 88, .07); }
}
/* Review 29.10.: abgeblendete Karte in Variante 4: der eingerückte Depot-Block stand als graues Kästchen auf weißem Kartengrund. Kartengrund mitfärben. */
@media (max-width: 991px) {
  html.tg-look-4 #v5-tabelle tr.is-aus { background: #f4f5f7; }
}

/* =====================================================================================================================
   Finale Fassungen 5–7 (29.10.2026, Alex-Feedback zu 1–4). Nur mit ?tabellenlook=5..7 (html.tg-look-5/6/7).
   Gemeinsam: Basis Variante 4 (mobile Karten, Desktop ruhig), Zebra noch leichter als 4 (#f8fafd statt #f7f9fc, aus beim Filtern),
   gedrückter Chip und Empfehlungsband hell statt vollflächig blau (Alex: „zu viele Farben“, „Bluescreen“), einziger kräftiger
   Blauton im Filterzustand bleibt der gefüllte Knopf der empfohlenen Zeile. Im Weg „Vermittler wechseln“ Konturknöpfe statt
   gefüllter (Alex: Primärstil zu dominant). ebase (zwei Depots): Sparplan und Knöpfe senkrecht mittig, damit sie für beide Depots gelten.
   5 = Kopf aus Variante 1 (weiß, dunkelblaue Linie). 6 = Kopf als Fläche wie 3, aber aufgehelltes Blau #34507f (Weiß 8,1:1 statt 15:1).
   7 = Kopf aus 6 mit dezenter Spaltentrennung und zentrierter Ausrichtung (Kopf und Inhalt) zum Vergleich der offenen Fragen.
   ===================================================================================================================== */
/* Chips: gedrückt hell getönt mit dunkler Kontur und Häkchen */
html:is(.tg-look-5, .tg-look-6, .tg-look-7) .v5 .v5-banken .v5-chip[aria-pressed="true"],
html:is(.tg-look-5, .tg-look-6, .tg-look-7) .v5 .v5-chip[aria-pressed="true"] { background: #eef2f9; border: 2px solid #0b2358; color: #0b2358; font-weight: 600; }
html:is(.tg-look-5, .tg-look-6, .tg-look-7) .v5 .v5-chip[aria-pressed="true"]:hover { background: #e3e9f4; color: #0b2358; }
html:is(.tg-look-6, .tg-look-7) .v5 .v5-chip[aria-pressed="true"] { border-color: #34507f; }
/* Empfehlungsband „Passt zu …“: hell statt Vollfläche (v6.css setzt Weiß mit !important) */
html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle .v6-tband { background: #fff; color: #0b2358 !important; border: 1px solid #0b2358; font-weight: 600; }
html:is(.tg-look-6, .tg-look-7) #v5-tabelle .v6-tband { border-color: #34507f; }
/* Vermittler wechseln: Konturknopf wie in den anderen Wegen, Füllung erst beim Überfahren */
html:is(.tg-look-5, .tg-look-6, .tg-look-7) .v6[data-weg="wechsel"] .v6-td-akt .v5-akt { background: #fff; color: var(--blue); }
html:is(.tg-look-5, .tg-look-6, .tg-look-7) .v6[data-weg="wechsel"] .v6-td-akt .v5-akt:hover,
html:is(.tg-look-5, .tg-look-6, .tg-look-7) .v6[data-weg="wechsel"] .v6-td-akt .v5-akt:focus { background: var(--blue); color: #fff; }

@media (min-width: 992px) {
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle td, html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle th[scope=row] { border-bottom-color: #e3e8f1; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tbody tr:nth-child(even) > * { background: #f8fafd; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle .v5-preis { color: #0b2358; }
  /* Zeile mit zwei Depots (ebase): Sparplan und Knöpfe mittig zur ganzen Zeile; Preise bleiben neben ihrem Depotnamen oben */
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr:has(.v6-preis--var) > .v5-td-spar,
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr:has(.v6-preis--var) > .v6-td-akt { vertical-align: middle; }
  /* 5: Kopf aus Variante 1 */
  html.tg-look-5 #v5-tabelle thead th { color: #0b2358; border-bottom: 2px solid #0b2358; padding-bottom: 12px; }
  /* 6 und 7: Kopf als Fläche, aufgehelltes Dunkelblau, klare Grenze zum Filterbereich */
  html:is(.tg-look-6, .tg-look-7) #v5-tabelle thead th { background: #34507f; color: #fff; border-bottom: 0; padding-top: 14px; padding-bottom: 12px; font-weight: 600; }
  html:is(.tg-look-6, .tg-look-7) #v5-tabelle thead th:first-child { border-radius: 8px 0 0 0; }
  html:is(.tg-look-6, .tg-look-7) #v5-tabelle thead th:last-child { border-radius: 0 8px 0 0; }
  html:is(.tg-look-6, .tg-look-7) #v5-tabelle.v6-tab--a thead th:nth-child(4) { color: #fff; }
  html:is(.tg-look-6, .tg-look-7) #v5-tabelle tbody tr:last-child > * { border-bottom: 1px solid #34507f; }
  /* 7: dezente Spaltentrennung (Kopf hell auf Blau, Inhalt in Linienfarbe) und zentrierte Ausrichtung */
  html.tg-look-7 #v5-tabelle thead th + th { border-left: 1px solid rgba(255, 255, 255, .3); }
  html.tg-look-7 #v5-tabelle tbody td { border-left: 1px solid #e3e8f1; }
  html.tg-look-7 #v5-tabelle thead th, html.tg-look-7 #v5-tabelle td, html.tg-look-7 #v5-tabelle th[scope=row] { text-align: center; }
  html.tg-look-7 #v5-tabelle .v5-bankcell { align-items: center; }
  html.tg-look-7 #v5-tabelle .v5-logo { justify-content: center; }
}
html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle:has(tr.is-aus) tbody tr > * { background: #fff; }
html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle:has(tr.is-aus) tbody tr.is-empfohlen > * { background: #f3f6fd; }

/* Handy und Tablet: Karten aus Variante 4 samt ihren Review-Korrekturen */
@media (max-width: 991px) {
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr { border-color: #d8deea; border-radius: 12px; box-shadow: 0 1px 2px rgba(11, 35, 88, .06), 0 6px 18px rgba(11, 35, 88, .07); overflow: hidden; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr.is-aus { box-shadow: none; background: #f4f5f7; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr.is-an, html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr.is-ihre { border-color: var(--blue); box-shadow: inset 4px 0 0 var(--blue), 0 1px 2px rgba(11, 35, 88, .06), 0 6px 18px rgba(11, 35, 88, .07); }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle th[scope=row] { background: #f3f6fb; border-bottom: 1px solid #d8deea; padding-bottom: 12px; border-radius: 12px 12px 0 0; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle .v5-td-preis, html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle .v5-td-spar { padding-top: 14px; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle .v5-preis { color: #0b2358; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle .v5-td-spar { font-family: var(--serif); font-size: calc(20px * var(--v5sk, 1)); color: #0b2358; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle .v5-td-spar .v5-lbl, html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle .v5-td-spar .v5-pos { font-family: var(--sans); font-weight: 400; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle .v5-td-spar:not(:has(.v5-pos)) { font-family: var(--sans); font-size: calc(17px * var(--v5sk, 1)); }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle .v5-td-depot { border-top: 1px solid #e3e8f1; margin: 6px 12px 0; padding-left: 0; padding-right: 0; width: auto; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle .v6-td-akt { background: #fafbfd; border-top: 1px solid #e3e8f1; margin-top: 8px; padding-top: 14px !important; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr.is-aus .v6-td-akt { background: transparent; }
}
/* Prüflauf 5–7 (29.10.): Chip mit 2-px-Rand wurde 2 px schmaler als ungedrückt; Rand 1 px plus innerer Schatten, gleiche Breite */
html:is(.tg-look-5, .tg-look-6, .tg-look-7) .v5 .v5-chip[aria-pressed="true"] { border-width: 1px; box-shadow: inset 0 0 0 1px #0b2358; }
html:is(.tg-look-6, .tg-look-7) .v5 .v5-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1px #34507f; }
/* Prüflauf 5–7: Spaltenlinien in 7 nahmen der Preisspalte 1 px, „25 bis 45 €“ lief 2 px über; Innenabstand um 1 px kleiner */
@media (min-width: 992px) { html.tg-look-7 #v5-tabelle tbody td { padding-left: 10px; padding-right: 10px; } }
@media (max-width: 991px) {
  /* Prüflauf 5–7: Der 4-px-Balken (inset) war nur neben dem eingerückten Depot-Block sichtbar, die übrigen Zonen deckten ihn ab.
     Passende Karte jetzt mit 2-px-Rahmen (1 px Rand plus Schatten, keine Verschiebung) statt Balken */
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr.is-an, html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr.is-ihre { box-shadow: 0 0 0 1px var(--blue), 0 6px 18px rgba(11, 35, 88, .07); }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr.is-an > th[scope=row], html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr.is-ihre > th[scope=row] { box-shadow: none; }
  /* ebase am Handy: zwei Preise untereinander; „10 € im Monat“ in einer Zeile mittig daneben (Bezeichnung bleibt oben auf Höhe von „Preis pro Jahr“).
     Untereinander war die Zelle gleich hoch wie die Preiszelle, „10 €“ stand dann nur neben „26 €“. */
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr:has(.v6-preis--var) > .v5-td-spar { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; align-items: center; column-gap: .35em; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr:has(.v6-preis--var) > .v5-td-spar > .v5-lbl { grid-column: 1 / -1; align-self: start; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr:has(.v6-preis--var) > .v5-td-spar > .v5-pos { margin: 0; }
}
/* Prüflauf 5–7: bei 992–1179 px lief „25 bis 45 €“ samt Lupe in 7 (Spaltenlinie, zentriert) 8 px in den Innenabstand; dort Preiszelle mit 5 px Innenabstand */
@media (min-width: 992px) and (max-width: 1179px) { html.tg-look-7 #v5-tabelle tbody td.v5-td-preis { padding-left: 5px; padding-right: 5px; } }
@media (max-width: 991px) {
  /* Prüflauf 5–7: empfohlene Karte war fleckig (Preis- und Depotzone getönt, Ränder und Knopfzone weiß); Karte jetzt einheitlich getönt */
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr.is-empfohlen { background: #f3f6fd; }
  html:is(.tg-look-5, .tg-look-6, .tg-look-7) #v5-tabelle tr.is-empfohlen > td { background: transparent; }
}

/* Jury-Korrekturen 29.10.2026 (Design, UX, Nutzerin) an 5–7; Vorlage: legacy_trigonus_work/fonds-tabelle-look/final/00-vorlage.md */
/* a) Gedrückter Chip: Häkchen stand 2 px vor dem Text und dicht an der Rundung (Design + Nutzerin). Chips in 5–7 symmetrisch 24 px Innenabstand
      (gleiche Textmitte gedrückt/ungedrückt, kein Sprung), Häkchen 7 px vom Rand: rund 5 px Luft zum Text, 11 px zur Außenkante.
   b) Der Ein-Pixel-Rand aus dem Prüflauf griff nicht (Selektor mit .v5-banken war stärker), sichtbar waren 2 px Rand plus 1 px Schatten. */
html:is(.tg-look-5, .tg-look-6, .tg-look-7) .v5 .v6-steuer .v5-chip { padding-left: 24px; padding-right: 24px; }
html:is(.tg-look-5, .tg-look-6, .tg-look-7) .v5 .v6-steuer .v5-chip::before { left: 7px; }
html:is(.tg-look-5, .tg-look-6, .tg-look-7) .v5 .v5-banken .v5-chip[aria-pressed="true"] { border-width: 1px; }
@media (min-width: 992px) {
  /* c) Kopf 6/7: Beschriftung senkrecht mittig in der Fläche (vorher oben rund 35 px, unten 12 px Luft; Design + Nutzerin) */
  html:is(.tg-look-6, .tg-look-7) #v5-tabelle thead th { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; }
}