/* Tarifvergleich im Förderrechner (assets/js/21-tarifvergleich.js) – nur im Vorschau-Modus im DOM. */

/* Knopf oben rechts in „Tarife & Einstellungen", über den drei Karten */
.tv-kopf { display:flex; justify-content:flex-end; margin:0 0 8px; }
.tv-oeffnen { border:1px solid #d5dde6; background:#fff; color:var(--accent2);
  border-radius:8px; padding:6px 12px; font:600 12px/1.2 'DM Sans',sans-serif; cursor:pointer; }
.tv-oeffnen:hover { border-color:var(--accent2); background:var(--accent2-light); }

/* Pop-up: so breit, dass die Tabelle ohne Querscrollen passt; nur bei sehr vielen Zeilen scrollt der Inhalt senkrecht */
#tv-modal.modal-overlay.modal-mitte { padding:12px; }
#tv-modal .modal.tv-modal { width:min(1240px, 100%); max-height:96vh; display:flex; flex-direction:column; }
#tv-modal .modal-header { padding:12px 18px; }
#tv-modal .modal-body { overflow-y:auto; overflow-x:hidden; padding:8px 18px 10px; font-size:13px; line-height:1.4; }

.tv-leiste { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:8px 18px;
  border-bottom:1px solid var(--border); }
.tv-seg { display:inline-grid; grid-template-columns:auto auto; }
.tv-seg button { padding:6px 12px; }
.tv-feld { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted); }
.tv-feld input { width:78px; height:30px; padding:0 8px; border:1px solid #d5dde6; border-radius:7px;
  font:500 13px/1 'DM Mono',monospace; color:var(--text); background:#fff; text-align:right; }
.tv-feld input:focus { outline:none; border-color:var(--accent2); }
.tv-feld span { font-weight:400; }
.tv-check { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text); cursor:pointer; }
.tv-entwurf { margin-left:auto; font-size:11px; color:var(--muted); }

.tv-annahmen { font-size:12px; color:var(--muted); margin-bottom:6px; }
.tv-dyn-hinweis { font-size:12px; color:#6b5200; background:var(--warn-bg); border:1px solid var(--warn-border);
  border-radius:8px; padding:4px 10px; margin:0 0 6px; }
/* Hinweis unter den Rentenform-Knöpfen (13-…, renderFoerderRentenbezugQuelle) bei Tarifen ohne Dynamik im Angebot */
.rb-dyn-hinweis { color:#8a6400; }

.tv-rahmen { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.tv-tabelle { width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; }
.tv-tabelle th, .tv-tabelle td { padding:3px 8px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--border); }
.tv-tabelle tbody tr:last-child td { border-bottom:0; }
.tv-tabelle th { padding-top:5px; padding-bottom:5px; background:#f6f8fa; font-weight:700; font-size:11.5px; color:var(--muted); vertical-align:bottom; white-space:normal; }
.tv-tabelle th button { border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer; text-align:inherit; }
.tv-tabelle th button:hover, .tv-tabelle th.tv-sortiert { color:var(--text); }
.tv-tabelle th small { display:block; font-weight:400; font-size:10.5px; }
.tv-tabelle .tv-l { text-align:left; }
.tv-tabelle td.tv-l { white-space:normal; }
.tv-tabelle td.tv-l:first-child { min-width:190px; }
.tv-name { font-weight:700; color:var(--text); line-height:1.25; }
.tv-code { font-weight:400; color:var(--muted); font-size:11.5px; }
.tv-sub { font-size:11px; color:var(--muted); line-height:1.2; }
.tv-hinweis { color:#8a6400; }
.tv-muted { color:var(--muted); }

/* Netto-Rente mit Balken (Länge relativ zur höchsten Netto-Rente der Tabelle) */
.tv-netto { position:relative; min-width:104px; font-weight:700; }
.tv-balken { position:absolute; left:8px; top:50%; height:4px; margin-top:7px; max-width:calc(100% - 16px);
  background:#5a57b3; opacity:.28; border-radius:3px; }
.tv-wert { position:relative; }

.tv-gewaehlt td { background:var(--accent2-light); }
.tv-aktion { width:1%; }
.tv-waehlen { border:1px solid #d5dde6; background:#fff; border-radius:6px; padding:3px 8px;
  font:600 11.5px/1.2 'DM Sans',sans-serif; color:var(--accent2); cursor:pointer; }
.tv-waehlen:hover { border-color:var(--accent2); }
.tv-aktiv { font-size:11.5px; font-weight:700; color:var(--accent2); }

.tv-erlaeuterung { margin-top:8px; font-size:11.5px; color:var(--muted); }
.tv-erlaeuterung summary { cursor:pointer; font-weight:600; color:var(--accent2); }
.tv-fuss { margin:6px 0 0 16px; display:grid; gap:4px; }
.tv-fehler { color:var(--red); }

/* Schmale Fenster (Tablet hochkant, Telefon): hier geht es nur mit Querscrollen der Tabelle */
@media (max-width:980px) {
  .tv-rahmen { overflow-x:auto; }
  .tv-entwurf { margin-left:0; width:100%; }
  #tv-modal .modal-body { padding:10px 12px 14px; }
  .tv-leiste { padding:8px 12px; }
}

/* Hinweis in der großen Vergleichstabelle (13-…, produktCell) bei Tarifen ohne Dynamik im Angebot */
.vgl-prod-dyn { margin-top:2px; font:600 10.5px/1.3 'DM Sans',sans-serif; color:#8a6400; }