/* Layout block eignung_box. Source: docs/design/referenz/04-bausteine.html, 02-artikel.html. */
.fit { display: grid; gap: 12px; }
.fit-col { border-radius: var(--r-lg); padding: 16px; }
.fit-col.yes { background: var(--pos-soft); }
.fit-col.no { background: var(--neg-soft); }
.fit-col h3 { font-size: 16px; font-weight: 800; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.fit-col h3 i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; color: #fff; flex: none; }
.fit-col.yes h3 i { background: var(--pos); }
.fit-col.no h3 i { background: var(--neg); }
.fit-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fit-col li { font-size: 15px; padding-left: 18px; position: relative; }
.fit-col li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; }
.fit-col.yes li::before { background: var(--pos); }
.fit-col.no li::before { background: var(--neg); }
.fit-note { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-top: 12px; }

@container page (min-width: 900px) {
  .fit { grid-template-columns: 1fr 1fr; gap: 16px; }
  .fit-col { padding: 20px; }
}