Vorlage:Top20/styles.css

/* Top20 list (sanitizer-friendly, mobile-first)
 * Works with 
 * Keep comments in English.
 */

/* Reset & counter on the ordered list */
#tt-top20 ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: topv;
  /* Mobile: single column by default */
  column-count: 1;       /* safer than 'columns' shorthand */
  column-gap: 0;         /* no gap when single column */
}

/* Each list item: space for the number, robust wrapping */
#tt-top20 li {
  position: relative;
  counter-increment: topv;
  padding-left: 3.2ch;     /* width for the number gutter */
  margin: 0.18rem 0;
  break-inside: avoid;     /* don't split items across columns */
  overflow-wrap: anywhere; /* break very long tokens if needed */
  word-break: break-word;  /* legacy fallback */
  min-width: 0;            /* allow wrapping inside columns */
}

/* The left-aligned counter "1.", "2.", … */
#tt-top20 li::before {
  content: counter(topv) ".";
  position: absolute;
  left: 0;
  width: 2.6ch;            /* fits 1–2 digits (1–99). Increase if 100+ */
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;            /* subtle */
}

/* Desktop & large tablets: two columns */
@media (min-width: 900px) {
  #tt-top20 ol {
    column-count: 2;
    column-gap: 2rem;
  }
}

/* Optional: print in a single column for readability */
@media print {
  #tt-top20 ol {
    column-count: 1;
    column-gap: 0;
  }
}