/* Icon-Listen — Utility
 *
 *   <ul class="list">…</ul>             Default-Marker: Häkchen
 *   <ul class="list arrow">…</ul>       Modifier tauscht nur das Marker-Icon
 *   <ol class="list star muted">…</ol>  Farb-Modifier färbt nur den Marker
 *   <ul class="list check bg">…</ul>    Flächen-Modifier: getönte Box (--color-bg-alt)
 *
 * Muster wie .link.download (05-links.css): die Modifier wirken NUR zusammen
 * mit .list (Selektor .list.arrow), kollidieren also nicht mit gleichnamigen
 * Klassen anderswo. Marker via mask + currentColor-Prinzip → der Marker erbt
 * seine Farbe (Default: --color-primary), der Text bleibt unberührt.
 *
 * Die Marker-Pfade sind aus assets/img/icons.svg gespiegelt — ::before kann
 * keine <use>-Sprites rendern. Bei Icon-Änderung dort hier mitziehen.
 */

.list {
  /* Marker-Icon-Tokens (Data-URI, Form analog 05-links.css) */
  --list-check:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  --list-arrow:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>");
  --list-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>");
  --list-plus:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5v14'/></svg>");
  --list-star:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
  --list-dash:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>");

  --list-icon: var(--list-check);            /* aktiver Marker (Default = Häkchen) */
  --list-icon-size: 1.15em;
  --list-icon-gap: var(--space-2);
  --list-icon-color: var(--color-primary);   /* nur der Marker, nicht der Text */

  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Direkte Kinder: Einrückung über padding + absolut positionierter Marker.
   Bewusst KEIN display:grid auf dem <li> — sonst würde gemischter li-Inhalt
   (z.B. <strong>Titel</strong> plus Fließtext) in separate Grid-Items zerfallen
   und der Text in der schmalen Icon-Spalte pro Wort umbrechen. So fließt der
   Inhalt normal und der Marker sitzt an der ersten Zeile.
   Verschachtelte Listen bleiben unberührt (dort erneut .list setzen). */
.list > li {
  position: relative;
  padding-inline-start: calc(var(--list-icon-size) + var(--list-icon-gap));
}

.list > li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: var(--list-icon-size);
  block-size: var(--list-icon-size);
  /* Marker auf erster Textzeile zentrieren: (Zeilenhöhe − Iconhöhe) / 2 */
  margin-block-start: calc((1em * var(--leading) - var(--list-icon-size)) / 2);
  background-color: var(--list-icon-color);
  mask: var(--list-icon) center / contain no-repeat;
  -webkit-mask: var(--list-icon) center / contain no-repeat;
}

/* Marker-Modifier — nur wirksam zusammen mit .list */
.list.check   { --list-icon: var(--list-check); }
.list.arrow   { --list-icon: var(--list-arrow); }
.list.chevron { --list-icon: var(--list-chevron); }
.list.plus    { --list-icon: var(--list-plus); }
.list.star    { --list-icon: var(--list-star); }
.list.dash    { --list-icon: var(--list-dash); }

/* Farb-Modifier — färben nur den Marker (Text bleibt unberührt) */
.list.muted   { --list-icon-color: var(--color-text-muted); }
.list.text    { --list-icon-color: currentColor; }
.list.accent  { --list-icon-color: var(--color-accent); }
.list.success { --list-icon-color: var(--color-success); }
.list.warning { --list-icon-color: var(--color-warning); }
.list.error   { --list-icon-color: var(--color-error); }

/* Flächen-Modifier — hebt die Liste auf eine getönte Box (--color-bg-alt).
   Kombinierbar mit Marker-/Farb-Modifiern (z.B. .list.check.bg). */
.list.bg {
  background: var(--color-bg-alt);
  padding: var(--space-5);
  border-radius: var(--radius);
}

.list.dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  transition: background var(--transition-slower), color var(--transition-slower);
}

/* Farbe auf ALLE Nachfahren erzwingen (nicht nur erben) — sonst behalten
   Elemente mit eigener Farbe (z.B. strong, a) ihre Farbe und invertieren nicht. */
.list.dark * {
  color: var(--color-text-inverse);
  transition: color var(--transition-slower);
}

/* Hover-Invert nur Desktop (Touch hat keinen echten Hover). */
@media (min-width: 79.5rem) {
  .list.dark:hover {
    background: var(--color-bg-alt);
  }
  .list.dark:hover,
  .list.dark:hover * {
    color: var(--color-text);
  }
}