/* Vergleichsseiten im Blog (seit 30.09.2026, scripts/build-vergleich.py).
   Breit: Tabelle mit fester erster Spalte, waagerecht scrollbar. Schmal: je App eine Karte mit Beschriftungen. */
.cmp-scroll { margin: 22px 0 14px; border-radius: 20px; background: var(--t-card); overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cmp-table { width: 100%; min-width: 1040px; border-collapse: collapse; font-size: 14.5px; }
.cmp-table th { padding: 15px 14px 12px; text-align: left; vertical-align: bottom; font: 700 10.5px/1.35 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--t-fg-3); border-bottom: 1px solid var(--t-line); }
.cmp-table td { padding: 13px 14px; vertical-align: top; color: var(--t-fg-2); line-height: 1.45; border-bottom: 1px solid var(--t-line); }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table th:first-child, .cmp-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--t-card); }
.cmp-table td:first-child { min-width: 150px; color: var(--t-fg); font-weight: 650; }
.cmp-table td:first-child small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--t-fg-3); }
.cmp-na { color: var(--t-fg-3); font-style: italic; }
.cmp-note, .doc-section p.cmp-note { font-size: 13.5px; line-height: 1.6; color: var(--t-fg-3); }
.cmp-apps h3 { margin: 26px 0 6px; }
.doc-section .blog-points + p { margin-top: 18px; }
.cmp-sources, .doc-section ul.cmp-sources { font-size: 13.5px; line-height: 1.6; color: var(--t-fg-3); padding-left: 18px; }
.cmp-sources li { margin: 3px 0; }
.cmp-sources a { word-break: break-word; }
/* Breiter als die Textspalte, damit alle acht Spalten ohne Scrollen passen (ab rund 1230 px Fensterbreite). */
@media (min-width: 700px) {
  .cmp-scroll { position: relative; left: 50%; width: min(1180px, calc(100vw - 48px)); transform: translateX(-50%); }
}
@media (max-width: 699px) {
  .cmp-scroll { overflow: visible; background: none; border-radius: 0; margin: 18px 0 10px; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td { display: block; width: auto; min-width: 0; }
  .cmp-table thead { display: none; }
  .cmp-table tr { margin: 0 0 12px; padding: 16px 18px 12px; border-radius: 18px; background: var(--t-card); }
  .cmp-table td { position: static; padding: 5px 0; border: 0; background: none; }
  .cmp-table td:first-child { padding: 0 0 8px; font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.15; background: none; }
  .cmp-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font: 700 10.5px/1.4 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--t-fg-3); }
}