/* Label Contextual — SD-73
 * Non-interactive pill labels with contextual color coding.
 * Mobile-first: S default, M ≥1024px, L ≥1280px
 */

.label-contextual {
  display: inline-flex;
  align-items: center;
  gap: var(--dk-space-00);             /* 4px — between icon and text */
  height: 2rem;                        /* 32px — fixed across breakpoints */
  padding: var(--dk-space-00) var(--dk-space-03);  /* 4px 12px default (no icon) */
  border-radius: 1000px;
  white-space: nowrap;
  line-height: 1;
  color: var(--dk-color-black);
}

/* Types with icon get tighter left padding */
.label-contextual--alter,
.label-contextual--ort {
  padding-left: var(--dk-space-00);    /* 4px */
  padding-right: var(--dk-space-01);   /* 8px */
}

/* --- Color modifiers --- */
.label-contextual--alter,
.label-contextual--jury {
  background-color: var(--dk-color-brand-primary);
}

.label-contextual--ort,
.label-contextual--lokale-partnerschaft,
.label-contextual--kuenstlerische-patenschaft {
  background-color: var(--dk-color-brand-secondary-02);
}

.label-contextual--jahresthema {
  background-color: var(--dk-color-brand-secondary-01);
}

/* --- Icon --- */
.label-contextual__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;   /* 20px */
  height: 1.25rem;
  flex-shrink: 0;
}

.label-contextual__icon svg {
  width: 100%;
  height: 100%;
}