/* Regeltreue: je Regel ein Balken „wie oft eingehalten" und daneben, was es kostet,
   wenn sie gebrochen wird. Das ist der Kern dieser Seite. */
.rule { padding: 11px 0; border-bottom: 1px solid var(--border-2); }
.rule:last-child { border-bottom: 0; }
.rule .top2 { display: flex; align-items: baseline; gap: 9px; }
.rule .name { font-size: 13px; font-weight: 600; }
.rule .quote { margin-left: auto; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rule .sub2 { color: var(--dim); font-size: 11.5px; margin-top: 3px; }
.rule .track { margin-top: 7px; }

/* Vergleich „eingehalten gegen gebrochen" */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.cmp div { border-radius: 8px; padding: 9px 10px; }
.cmp .keep { background: var(--green-dim); border: 1px solid rgba(0,230,118,.22); }
.cmp .brk  { background: var(--red-dim);   border: 1px solid rgba(255,23,68,.22); }
.cmp .t2 { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cmp .n2 { font-size: 16px; font-weight: 650; margin-top: 3px; }
.cmp .s2 { font-size: 11px; color: var(--muted); }

.medal { font-size: 13px; margin-right: 5px; }