/* Page layout criteria_legend. Source: docs/design/referenz/10-so-arbeiten-wir.html. */
.crit-head { font-size: 18px; font-weight: 800; margin-bottom: 12px; }
.crit6 { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.crit6 li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.crit6 b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 16px; }
.crit6 p { font-size: 14px; line-height: 1.45; color: var(--ink-2); margin-top: 2px; }
.crit-lv { display: grid; gap: 10px; margin-top: 16px; }
.crit-lv div { display: grid; gap: 6px; justify-items: start; align-content: start; }
.crit-lv p { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
/* Level tags (.clvl, as in blocks/bestenliste.css; .lvl is taken by the Lagebild bars). Without a
   Themenwelt colour the Themenwelt tag uses the brand tint, as in the reference. */
.crit-lv .clvl { display: inline-block; font: 700 10px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.crit-lv .clvl-grund { background: var(--sunk); color: var(--ink-2); border: 1px solid var(--line); }
.crit-lv .clvl-tw { background: var(--brand-soft); color: var(--brand-ink); }
.crit-lv .clvl-fach { background: var(--ink); color: var(--bg); }
.crit-note { font-size: 15px; line-height: 1.55; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.crit-note b { font-weight: 600; }

@container page (min-width: 900px) {
  .crit6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crit-lv { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}