/* ============================================================
   Pro Tier — Listen
   <ul class="list check">     Haken im Kreis, Marker links (Section-Texte)
   <ul class="list bg check">  einzelne Pillen nebeneinander, Chevron im Kreis links (CMS-Texte)
   Farben ausschließlich über die IPS-Tokens in variables.css.
   ============================================================ */

.list.check {
  --list-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zm-1.9 15.9L5.6 12.4 7 11l3.1 3.1L17 7.2 18.4 8.6z'/></svg>");
  --list-icon-size: 1.35em;
}

.list.bg.check {
  /* Pillen: Chevron im Kreis (Chevron als ausgestanztes Loch, einfarbige Maske) */
  --list-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM9.6 8.2 11 6.8l5.2 5.2-5.2 5.2-1.4-1.4 3.8-3.8z'/></svg>");

  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);

  background: var(--color-band);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
}

.list.bg.check > li {
  display: inline-flex;
  align-items: center;

  --pill-inset: var(--space-2);
  --pill-gap: 0.5em;   /* Abstand Chevron ↔ Text */
  --list-icon-size: 1.6em;

  margin-block: 0;

  padding-block: var(--space-2);
  /* Marker links vor dem Text */
  padding-inline: calc(var(--pill-inset) + var(--list-icon-size) + var(--pill-gap))
                  calc(var(--pill-inset) * 2);

  background: var(--color-bg);
  border: 0.0625rem solid var(--color-border-alt);

  border-radius: 0.75rem;

  font-weight: 500;
  line-height: 1.3;
}

.list.bg.check > li::before {
  inset-inline-start: var(--pill-inset);
  inset-inline-end: auto;
  inset-block-start: 50%;
  margin-block-start: 0;
  transform: translateY(-50%);
}

@media (max-width: 44.999rem) {
  .list.bg.check {
    flex-direction: column;
    flex-wrap: nowrap;

    --row-space: var(--space-4);
    gap: 0;
    padding: var(--row-space);
  }

  .list.bg.check > li {

    display: list-item;
    background: none;
    border: 0;
    border-radius: 0;
    font-weight: inherit;

    --list-icon-size: 1.35em;

    --row-pad: 0px;
    padding-block: var(--row-pad) 0;
    padding-inline: calc(var(--list-icon-size) + var(--list-icon-gap)) 0;
  }

  .list.bg.check > li + li {
    margin-block-start: var(--row-space);
    border-top: 0.0625rem solid var(--color-border);
    --row-pad: var(--row-space);
  }

  .list.bg.check > li::before {
    inset-inline-start: 0;
    inset-inline-end: auto;
    inset-block-start: 0;
    margin-block-start: calc(
      var(--row-pad)
      + (1em * var(--leading) - var(--list-icon-size)) / 2
      - 0.1em
    );
    transform: none;
  }
}