/* W26D Klipp-Schutz für /vergleich/* (24.09.2026)
   Kritik r6: Vergleichstabellen bei 360 px „rechts abgeschnitten“ — der Scroller hatte keinen
   sichtbaren Hinweis, der Leser sah nur halbe Wörter („Als „der KI-Telefonas…“).
   Lösung: unter 60em Stapel-Layout (jede Zeile eine Karte, Spaltenkopf als Label über dem Wert),
   darüber bleibt die Tabelle. Dazu deutsche Silbentrennung (lang="de") statt harter Kanten. */

body { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 2; }

@media (max-width: 60em) {
  .vgl-tbl, .cmp-tbl { min-width: 0; }
  .vgl-tbl thead, .cmp-tbl thead { display: none; }
  .vgl-tbl, .vgl-tbl tbody, .vgl-tbl tr, .vgl-tbl td,
  .cmp-tbl, .cmp-tbl tbody, .cmp-tbl tr, .cmp-tbl td { display: block; width: auto; }
  .vgl-tbl tr, .cmp-tbl tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .vgl-tbl td, .cmp-tbl td { border: 0; padding: var(--space-1) 0; }
  .vgl-tbl td.feat, .cmp-tbl td.feat {
    width: auto; padding-bottom: var(--space-1-5);
    font-family: var(--font-serif); font-size: 18px; line-height: var(--lh-body); color: var(--ink);
  }
  .vgl-tbl td[data-label]:not(.feat)::before,
  .cmp-tbl td[data-label]:not(.feat)::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--t-accent);
  }
  .vgl-tbl td.own { padding-left: 12px; border-left: 2px solid var(--accent); }
  .cmp-tbl td.cell-vendor { text-align: left; min-width: 0; }
  .cmp-tbl tr:hover td { background: none; }
}

/* Karten-Raster: Kinder dürfen schmaler als ihr längstes Wort werden. */
.cmp-cards > * { min-width: 0; }